21.08.02 grid-template-columns

実際のプロジェクトを行う場合は、まず大まかな機能を実施します.
これはフレームワークに従ってCSSを位置決めする日です.

まずコンテンツの番号やタイトルなどをホームページにマッピングし、
BordBoxという名前で構成部品を作成しました
他の反応グループのメンバーがgrid-template-columnsを書いているのを初めて見たとき、今日TILで書いたハハを知った.🤴🏽

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

上のコードのように書けば

こうやって出てきたの!

fr単位を含む可変グリッド

長さとパーセントを使用してグリッドを作成するほか、fr単位を使用してグリッド行と列を可変に調整することもできます.同じ単位は、グリッドコンテナ内の使用可能な空間の分割部分に等しい.
トラックリストを以下の定義に変更し、3つの1 frトラックを生成します.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

可変滑走路があることを確認します.fr単位で割り当てられる空間は均等であり、例えば、以下の規定を変更すると、トラックに異なる値を付与することができる.

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

最初のトラックは、利用可能な空間の2 frを取得し、他の2つのトラックは1 frを取得し、最初のトラックをより大きくする.fr単位と固定長トラックを混合することができる.この場合、これらの空間は、トラックを固定するために必要な空間に加えて、他のトラックに割り当てられる.
注意:https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids