[ CSS ] Grid

🔴  Why Grid?

⚪  격자 무늬로 동일한 상하좌우 간격을 두고 아이템을 배치하고 싶을 때, flex를 사용하면 개별적으로 설정해줘야 하는 요소들이 너무 많으며, 아이템을 추가할 때마다 css를 추가해줘야 하는 번거로움이 있다.

 

🟠  CSS Grid Basic Concepts

 

.father {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 100px 50px 300px;
  column-gap: 5px;
  row-gap: 10px;
}

 

🟡  Grid Template Areas

 

.grid {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: 100px repeat(2, 200px) 100px;
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer"
}
.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

 

<div class="grid">
  <div class="header"></div>
  <div class="content"></div>
  <div class="nav"></div>
  <div class="footer"></div>
</div>

 

🟢  Rows and Columns

 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
}
.header {
  background-color: #2ecc71;
  /* first method */
  grid-column-start: 1;
  grid-column-end: 5;
  /* second method */
  grid-column: 1 / -1;
  /* third method */
  grid-column: span 4;
}
.content {
  background-color: #3498db;
  /* first method */
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  /* second method */
  grid-column: 1 / -2;  
  grid-row: 2 / 4;
  /* third method */
  grid-column: 1 / -2;  
  grid-row: span 2;
}
.nav {
  background-color: #8e44ad;
  /* first method */
  grid-row-start: 2;
  grid-row-end: 4;
  /* second method */
  grid-row: 2 / 4;
  /* third method */
  grid-row: span 2;
}
.footer {
  background-color: #f39c12;
  /* first method */
  grid-column-start: 1;
  grid-column-end: 5;
  /* second method */
  grid-column: 1 / -1;
  /* third method */
  grid-column: span 4;
}

 

🔵  Grid Template

 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  gap: 5px;
  /* grid는 높이가 없으므로 직접 지정해줘야 한다. */
  height: 50vh;
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
}
.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

 

🟣  Place Items, Place Content, Place Self

 

.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: stretch center; /* vertical horizontal */
}

⚪  place-items는 그리드 내의 모든 아이템들의 배치를 수직, 수평 순서대로 한 번에 지정하도록 설정해주는 속성이다.

⚪  justify-items로 수평을, align-items로 수직을 따로 지정할 수도 있다.

⚪  stretch는 가로 세로에 가변값을 줬을 때만 적용 가능한 속성이다.

 

 

.grid {
  background: grey;
  color: white;
  display: grid;
  gap: 5px;
  height: 250vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  place-content: end center; /* vertical horizontal */
}

⚪  place-content는 그리드 틀의 배치를 수직, 수평 순서대로 한 번에 지정하도록 설정해주는 속성이다.

⚪  justify-content로 수평을, align-content로 수직을 따로 지정할 수도 있다.

 

 

.header {
  background-color: #2ecc71;
  place-self: start end;
}

⚪  place-self는 그리드 내의 하나의 아이템의 배치를 수직, 수평 순서대로 한 번에 지정하도록 설정해주는 속성이다.

⚪  justify-self로 수평을, align-self로 수직을 따로 지정할 수도 있다.

 

🔴  Auto Columns and Rows

 

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  ...
  <div class="item">50</div>
</div>

 

.gird {
  color: white;
  display; grid;
  gap: 5px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}

⚪  grid-auto-flow를 통해 grid의 정렬 방향을 정할 수 있다.

⚪  grid-auto-columns 혹은 grid-auto-rows를 통해 template에 지정된 반복된 횟수의 아이템 뿐만 아니라 모든 아이템들에 크기를 지정할 수 있다.

⚪  하지만, template은 행 혹은 열의 갯수를 지정해주는데 여전히 필요하다.

 

🟠  minmax

⚪  grid의 크기가 화면의 크기에 따라 가변적으로 될 때, 최소 크기와 최대 크기를 정해줄 수 있다.

⚪  최소 크기보다 작은 크기가 되는 화면에서는 아이템의 크기가 줄지 않고 스크롤이 생성된다.

 

.grid {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, minmax(100px, 1fr)); /* min, max */
  grid-template-rows: repeat(4, 100px);
  grid-auto-columns: 100px;
}

 

🟡  auto-fit and auto-fill

 

.grid:first-child {
  /* element들을 같은 사이즈로 설정 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid:last-child {
  /* element를 유동적인 사이즈로 설정 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

 

🟢  min-content max-content

⚪  min-content, max-content는 그리드 내부 아이템의 크기에 맞춰서 그리드의 크기를 지정해준다.

 

.grid {
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
}