【CSS】grid layout -その２-

programming

グリッドレイアウトの基本の続きです。

各要素の名前、グリッド線名によるアイテムの配置、およびminmax()などについて。

〇 使用例

アイテム１

アイテム２

アイテム３

アイテム４

アイテム５

アイテム６

〇コンテナ：グリッド全体を囲む要素。

〇アイテム：コンテナ内の直接の子要素（孫要素はアイテムではない）。

〇ライン：グリッドを分ける線。左端あるいは上から1,2,3,4...と番号が振られる。また、右端あるいは下から-1,-2...と負の番号が振られる。

〇トラック：grid-template-columns および grid-template-rows で定義された行と列において、任意の 2 本の線の間にある空間。

〇セル：4つの交差するグリッド線に囲まれた領域のこと。cssグリッドの最小単位。

〇エリア：一つ以上のセルからなる長方形の領域のこと。T字型やL字型などの領域を作ることはできない。

グリッド線には名前を付けることができる（全ての線に名前を付ける必要はない）。
* grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
* grid-template-rows: [row1] 50px [row2] 70px [row3] 100px [row4];

これにより、名前でアイテムを配置することができる。

  • col1~col4, row1~row2
  • col1~col3, row2~row3
  • col3~col4, row2~row3
  • col1~col4, row3~row4

上記レイアウトのコード。

html

<ul class="grid_container">
    <li class="item1">col1~col4, row1~row2</li>
    <li class="item2">col1~col3, row2~row3</li>
    <li class="item3">col3~col4, row2~row3</li>
    <li class="item4">col1~col4, row3~row4</li>
</ul>

css

.grid_container{
    display: grid;
    grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
    grid-template-rows: [row1] 50px [row2] 70px [row3] 100px [row4];
    gap: 20px;
    background:#fddbff;
    margin: 20px;
    padding:20px;
    text-align:center;
    position: relative;
}
.grid_container li {
    font-weight:bold;
    overflow:hidden;
    background:#fff;
}
.item1 {
  grid-column:col1 / col4;
  grid-row:row1 / row2;
  /* 
  grid-column-start: col1;
  grid-column-end: col4;
  grid-row-start: row1;
  grid-row-end: row2;
  */

}
.item2 {
  grid-column:col1 / col3;
  grid-row:row2 / row3;
  /* 
  grid-column-start: col1;
  grid-column-end: col3;
  grid-row-start: row2;
  grid-row-end: row3;
  */
}
.item3 {
  grid-column:col3;
  grid-row:row2;        
  /*
  grid-column-start: col3;
  grid-row-start: row2;
  */
}
.item4 {
  grid-column:col1 / col4;
  grid-row:row3;        
  /*
  grid-column-start: col1;
  grid-column-end: col4;
  grid-row-start: row3;
  */
}

grid-template-columnsだけを指定すると、行は暗黙的に作られる。

grid-auto-rowsで、暗黙的に作成された行のサイズを指定できる。（grid-auto-columnsでは、列のサイズを指定できる）

以下は、grid-template-columns: repeat(3, 1fr);、grid-auto-rows: 50px;

minmax()

トラックのサイズ指定において、最小のサイズと内容物に合わせたサイズを同時に指定できる。

以下は、grid-template-columns: repeat(3, 1fr);、grid-auto-rows: minmax(20px, auto);

  • ：内容物に合わせて、高さが変化する。
参考記事

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_grid_container

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines

お薦め

この世が良心的な人の生活しやすい世界になってほしい。それが私の願いです。

新しいアイデアと発想を生み出すために必要なたった一つのこと。

悪魔崇拝者を根本的に滅ぼし尽くす方法。それは「霊界」の奥義を知ることから始まります。

天皇がどこからどう見ても悪魔崇拝者であるという証拠。