公開-7

Grid

flexが1 D整列の場合、グリッドは2 D整列プロパティです。

メッシュもflexと同様にコンテナ定義とitems定義に分けられます。

grid-container property

グリッドを使用する場合は、まず行と列を指定します.

.container{
  border: 4px solid;
  display:grid;
  /* 열의 개수와 너비 */
  grid-template-columns: repeat(3,1fr);
  /* 행의 개수와 너비 */
  grid-template-rows: repeat(3,100px)
  /*  cell의 확장으로 인해 영향받는 cell을 관리하기 위한 속성  */
  grid-auto-rows: 100px;
  /*  배치하지 않은 아이템을 어떤 방식의
  자동 배치 알고리즘으로 처리할 지 정의한다. */
  grid-auto-flow: row dense;
  /* xxx-gap의 단축속성 */
  gap : 10px;
}

fr : fractional unitTrack:行または列を表します.Gutter:トレースとトレースの間の間隔.Cell:物品の最小単位領域を配置する.Area:1つ以上のセルからなる領域.

grid-items

.item:nth-child(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

セルをgridのcolumn、row方向に拡張できます.spanはセルの単位です.

.item:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}

order

グリッドアイテムの順序を指定します.
orderの数字が小さいほど、前に並んでいます.

.item:nth-child(6) {
  order: -1;
}

grid-template-areas

参照領域名grid-templateを作成します.

 grid-template-areas:
    "header header"
    " main aside"
    "footer footer";
}
.item{
  border : 1px solid;
}
.item:nth-child(1){
  grid-area: header;
}
.item:nth-child(2){
  grid-area: main;
}
.item:nth-child(3){
  grid-area: aside;
}
.item:nth-child(4){
  grid-area: footer;
}

.container{
// min-max(최소너비,최대너비)
// min-max는 container의 크기에 영향을 받지 않는다.
grid-template-columns: repeat(4,minmax(120px,1fr));
}

auto-fill:容器が大きくない場合、自動的に物品を改行処理し、それに応じて行/列を変更する.

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

auto-fillとauto-fitの違いauto-fillのように、空き容量がある場合、空き容量は保持される.auto-fit余剰スペースがあれば、自動的に占有されます.