公開-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;
}

grid-items

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

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

order

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

grid-template-areas

 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));
}

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