정요섭

정요섭

Front-end 개발자가 되기 위한 코린이

18.grid 배우기~

8 minute read

1. Life Before Grid (Grid가 필요한 이유)

<body>
  <div class="father">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.father {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child {
  flex-basis: 30%;
  background: peru;
  color: white;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child:nth-child(4) {
  margin-top: 10px;
}
  • flex의 단점(1) : space-between을 사용하여서 좌우의 간격을 주었지만, 위아래의 간격을 주기 위해서 윗 코드처럼 margin-top을 주어야한다는것이 flex의 첫번째 단점

;

  • flex의 단점(2) : space-between을 사용하였기 때문에 4번째와 5번째는 space-between이 적용되어 내가 원하는 위치에 자리 잡지 못하는 현상발생

  • 결론 : 즉 flex로 grid형태를 만들기가 어렵다.

2. CSS Grid Basic Concepts

  • Grid의 규칙은 flexbox와 거의 비슷해서 부모에서 모든걸 적용한다.

  • Grid의 속성

    • grid-template-columns : 그리드 세로의 줄 이름과 트랙 크기 조정 기능을 정의합니다.

    • column-gap : 세로마다 줄의 간격

    • grid-template-rows : 그리드 가로의 줄 이름과 트랙 크기 조정 기능을 정의합니다.

    • row-gap : 가로마다 간격

    • gap: 가로세로 둘다 적용

<body>
  <div class="father">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
  </div>
</body>

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

.child {
  background: peru;
  color: white;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  • 이 코드가 어떤 모습으로 보일지 생각해보자!

3. Grid Template Areas

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

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

  • grid-template-areas: template의 영역을 정해준다.

  • grid-area: 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 . nav"
    "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;
}

4. Rows and Columns

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

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column-start: 1;
  grid-column-end: 5;
}
.content {
  background-color: #3498db;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
}
.nav {
  background-color: #8e44ad;
  grid-row-start: 2;
  grid-row-end: 4;
}
.footer {
  background-color: #f39c12;
  grid-column-start: 1;
  grid-column-end: 5;
}

  • grid-column-start : 컬럼줄의 시작위치를 의미함

  • grid-column-end : 컬럼줄의 마지막위치를 의미함, 그리고 그 위치만큼 늘어남

  • 주의사항

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column-start: 1;
  grid-column-end: 5;
}
.content {
  background-color: #3498db;
}
.nav {
  background-color: #8e44ad;
}
.footer {
  background-color: #f39c12;
}

라고 했을때 column줄의 첫번째부터 5번째까지 늘어나되 gap을 포함해서 늘어난다.

  • gap 적용전

  • gap 적용후 : gap하기전 첫번째줄부터 5번째줄까지 적용한다음에, gap으로 인해서 늘어난다.

5. Rows and Columns Shortcuts

  • 4번처럼 하는것은 가시적으로나 별로 보기 안좋다. 이 방법을 좀더 요약해서 하는방법이 있다.
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column: span 4;
}
.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: span 2;
}
.nav {
  background-color: #8e44ad;
  grid-row: span 2;
}
.footer {
  background-color: #f39c12;
  grid-column: span 4;
}

  • 플러스가 의미하는것은 왼쪽부터 오른쪽으로 몇번째 줄인지를 의미하고 , 마이너스가 의미하는것은 오른쪽에서부터 왼쪽으로 몇번째 줄인지를 의미한다.

  • span은 cell의 공간을 의미하며 , span 4는 cell 공간 4개를 차지하겠다라는 의미이다.

    • 단 주의할점은 이것만 쓰면 시작점이 명확히 없기 때문에 원하는 레이아웃이 나오기 힘들다 따라서 시작점을 명시해줘야한다.

  • 원하는 레이아웃이 안나옴

.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: span 2;
}
.nav {
  background-color: #8e44ad;
  grid-row: 2 / 4;
}

  • 원하는 레이아웃이 나옴 ( 같은 선상에 있는 곳에 시작위치가 둘다 없기 때문에 )
.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: span 2;
}
.nav {
  background-color: #8e44ad;
  grid-row: span 2;
}

6. Line Naming : 잘 사용하지는 않는것같고, 복잡해지는 현상이 있는것 같다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];
  grid-template-rows: repeat(4, 100px [sexy-line]);
}

.header {
  background-color: #2ecc71;
  grid-column: span 4;
}
.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: sexy-line 1 / sexy-line 3;
}
.nav {
  background-color: #8e44ad;
  grid-row: span 2;
}
.footer {
  background-color: #f39c12;
  grid-column: span 4;
}

7. Grid Template

  • Grid의 측정단위 fr(fraction(부분))

  • fr : grid에서 사용가능한 공간을 의미한다(비율).

  • 비율이기 때문에 브라우저를 줄이면 같이 줄어든다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  /* 1fr 1fr 1fr 1fr  */

  /* grid-template-columns : 1fr 2fr 1fr 1fr  하면 두번째가 나머지보다 2배의 크기를 더 가짐*/

  grid-template-rows: repeat(4, 100px);
}

7.1 주의사항

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  /* 1fr 1fr 1fr 1fr  */

  /* grid-template-columns : 1fr 2fr 1fr 1fr  하면 두번째가 나머지보다 2배의 크기를 더 가짐*/
  grid-template-rows: repeat(4, 1fr);
}

을 할경우에는 화면이 아무것도 나타나지 않는다. 그 이유는 width는 우리가 부모에게 자동으로 auto 받지만 , height는 자식의 높이에 의해서 결정되기 때문인데, 이 경우에는 자식의 높이가 지정되어있지 않기 때문이다. 따라서 row를 fr로 나타내기 위해서는 높이를 지정해줘야한다.

7.2 template와 fr을 사용하여 grid 만들기

.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template:
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;

  /*  row/column으로  "/" 부터는 각 grid의 너비(column)를 나타냄  */

  /* 같은 결과가 나옴 */

  /* grid-template:
    "header header header header" 1fr
    "content content content nav" 1fr
    "content content content nav" 1fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr; */
}

/* posion : grid-column 1/2 , grid-row 1/2 */
/* water : grid-column 2/3 , groid-row 1/2 */

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

8. Place Items

  • grid container(css로 grid가 선언된것) 는 자식들을 가지고 있고, 그 자식들로 자신을 채운다.

  • 그 자식들을 item이라고 한다.

    • justify-items : 각 item들마다 Main axis와 Cross axis 가 생기면서, 각 아이템들의 좌우 위치를 정함

    • align-items : 각 item들마다 Main axis와 Cross axis 가 생기면서, 각 아이템들의 상하 위치를 정함

    • 둘다 stretch가 default 값이다.

    • place-items : align-items justify-items

  • justify-content 와 justify-items의 차이점은

    • justify-content는 container을 기준으로 Main axis와 Cross axis 가 생기는데,

    • justify-items는 각 item들마다 Main axis와 Cross axis 가 생긴다.

9. Place Content

grid 에서

  • justify-content : justify-content는 container을 기준으로 Main axis와 Cross axis 가 생김, grid를 조절

  • align-content : container을 기준으로 Main axis와 Cross axis 가 생김, grid를 조절

  • place-items : align-content justify-content

9.1 꿀팁

flex에서는 align-content가 아닌 align-items를 쓰는것일까?? ㅉ

10. Auto Columns and Rows

  • align-self : 각 아이템들의 위치를 조정할때 사용하며, 여러 아이템이 아닌 하나의 아이템의 상 하의 위치를 조정한다. child에 적용하는 property이다.

  • justify-self : 각 아이템들의 위치를 조정할때 사용하며, 여러 아이템이 아닌 하나의 아이템의 좌 우의 위치를 조정한다. child에 적용하는 property이다.

  • place-self : align-self justify-self

  • grid-auto-rows : 정의되지 않은 나머지 element들의 세로줄(row)의 값을 부여함

  • grid-auto-columns : 정의되지 않은 나머지 element들의 가로줄(row)의 값을 부여함

  • grid-auto-flow : grid의 방향을 정해줌 ( flex의 flex-direction과 같음 , flex와 마찬가지로 방향에 따라 main-axis와 cross-axis 가 달라질듯)

10.1 Auto Columns and Rows Example

grid {
  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;
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

<body>
  <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">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
    <div class="item">17</div>
    <div class="item">18</div>
  </div>
</body>

라고 할때 16개 까지 밖에 적용이 안되고 나머지들은 text의 높이만 가지는 박스가 만들어진다. 우리가 데이터를 받을때 그 데이터의 갯수를 알지 못하는데 딱 저렇게 16개밖에 적용이 안되게끔 만들어줄순 없다. 그러기에 적용되지 않은 나머지에도 영향을 주기위해 grid-auto-rows 와 grid-auto-column을 쓰는것이다.

11. minmax

minimax : 최소 최대 너비 또는 높이를 지정해줄때 사용한다.

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  /* 너비(세로줄)이 최소100px이상 1fr 이하가 되어야한다.
  지금처럼할경우 최소가px 단위이므로 브라우저를 줄일경우 100px은 유지되데 ,사라지면서 스크롤이 발생한다.  */
  grid-template-rows: repeat(4, 100px);
  grid-auto-columns: 100px;
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

12. auto-fit auto-fill

.grid {
  color: white;
  display: grid;
  gap: 5px;
  grid-auto-rows: 100px;
  margin-bottom: 30px;
}

.item:nth-child(odd) {
  background-color: #2ecc71;
}

.item:nth-child(even) {
  background-color: #3498db;
}

.grid:first-child {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid:last-child {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

flex와 grid의 차이점 중 하나가, flex는 단위를 %로 하고 화면을 줄일경우 반응형으로 위치가 조정되는 반면에, grid는 %로 해도 그 grid의 위치를 유지해버린다.

이것이 grid의 단점이라면 단점인데, 이 단점을 개선하기 위한 방법이

auto-fit 과 auto-fill 이다.

  • auto-fit : autofit 은 주어진 div로 가능한 한줄을 많이 채워넣어라 라는 말이다.(유동적인 사이즈)

우리가 repeat(5,1fr)을 했으면 5개씩 1fr이 적용 될텐데 “auto-fit을 할 경우 가질 수 있는 가장 많은 column의 각 크기는 50px로 할 거다“ 라는 뜻이다. (데이터베이스나 어떠한것들을 가져올 때 그 가져오는게 수많을 경우 사용)

  • auto-fill : 자식 element를 화면에 보이지 않더라도 꽉 채움(정확한 사이즈)

12.1 autofit vs number

grid-template-columns: repeat(auto-fit, 300px) vs repeat(5,300px) 의 차이점

  • auto-fit은 반응형이기 때문에 화면을 줄이면 div들이 내려가지만(반응형이기 때문에 화면이 늘어나거나 하는 것들을 방지)

repeat(5,300px)을 할 경우에는 반응형이 아니기 때문에 옆으로 화면이 늘어난다.(무조건 5개의 세로줄을 차지하려고함)

하지만 auto-fit,300px을 할 경우 반응형이기는 하지만 300px로 고정되어있기 때문에 이게 크기가 유연하게 바뀌지 않는다.

따라서 repeat(auto-fit, minimax(300px,1fr)로 바꿔줄 경우 크기를 줄이면 300px까지 줄어들었다가 늘리면 1fr까지 바뀌는 크기가 유연하게 바뀌는 현상을 볼수 있게 된다. 이게 코드 한줄로 반응형 디자인을 만드는 가장 좋은 방법이다.

12.1 autofill vs number

repeat(auto-fill, minimax(50px,1fr)을 할 경우 다음과 같은 것을 볼수 있다.

div를 8개만 만들었지만 한 줄이 모든 50px~1fr 크기의 Gost div(눈에 보이지 않지만 F12를 할 경우 채워저 있는 것을 확인) 로 채워지는 것을 볼 수 있다. 즉 autofill은 주어진 div와 goist div 로 가능하난 많은 같은 div로 한줄을 채워넣음

13. min-content max-content

  • child 안에 content의 값에 의해서 child의 크기가 조정된다.

  • max-content : 텍스트의 길이만큼 최대크기로 조정된다.

  • min-content : 텍스트가 가장 작은 길이로 될때 크기만큼 조정된다.

  • 우리가 반응형에서 브라우저를 줄일때 글씨의 크기가 box 안에서 튀어 나오는 현상이 발생했을때, 이 문제를 해결해줌

Tags:

Categories:

Updated:

Leave a comment

You may also enjoy