Grid 기본이론

프론트엔드/CSS

Grid 기본이론

syleemomo 2021. 10. 19. 21:49

728x90

참고 블로그

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

그리드 기본개념 - 컨테이너에 적용하는 속성들

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
    <div class="item">G</div>
    <div class="item">H</div>
    <div class="item">I</div>
  </div>
  
</body>
</html>

.container{
  display: grid;
  border: 3px solid #333;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

컨테이너에 적용하는 속성 (grid-template-columns, grid-template-rows, -ms-grid-rows, -ms-grid-columns)

아래와 같이 grid-template-columns를 고정폭으로 설정하면 3개의 컬럼(열)을 만들고 각각 300px, 300px, 700px 로 너비를 설정한다. 다만 현재 margin: .1rem 때문에 정확하지 않다. 해당 속성을 제거하고 개발자 도구에서 너비를 확인하면 정확히 설정한 너비가 된다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: 300px 300px 700px; /* 추가 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: 1fr 1fr 1fr; /* 수정 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

grid-template-columns: 1fr 1fr 1fr 을 적용한다. fr 은 fraction (조각, 분배)의 약자이다. 즉, 해당 설정은 3개의 컬럼을 만들고, 컨테이너 전체 너비를 3등분해서 1:1:1 비율로 너비를 나눠가진다는 의미다.

grid-template-columns: repeat(3, 1fr)

grid-template-columns: 1fr 1fr 1fr 은 위와 같이 써도 동일한 의미를 가진다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: 300px 3fr 1fr; /* 수정 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

grid-template-columns 는 고정폭과 가변폭을 섞어서 사용할 수 있다. 위와 같이 설정하면 컨테이너 전체 너비에서 첫번째 컬럼은 300px 로 고정하고, 두번째와 세번째 컬럼은 컨테이너의 남은 너비(컨테이너 너비 - 첫번째 컬럼 너비)를 3:1 의 비율로 나눠가진다. 현재는 정확하지 않지만 컨테이너 보더와 아이템의 마진을 제거하면 정확히 3:1 비율이 된다.

브라우저 창의 너비에 변화를 주면서 디바이스 크기를 변경해도 아래와 같이 두번째, 세번째 컬럼은 3:1 비율을 유지한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: 300px auto; /* 수정 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

위와 같이 설정하면 2개의 컬럼(열)을 만들고, 첫번째 컬럼은 300px 고정폭으로 설정한다. 두번째 컬럼은 컨테이너 전체 너비에서 300px 을 제외한 나머지 공간을 채운다. 디바이스 크기가 변하면 두번째 컬럼의 폭은 유동적으로 변한다.

grid-template-columns: 300px 1fr;

위와 같이 auto 대신 1fr 로 설정해도 동일한 의미가 된다.

repeat 함수

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr 5fr 2fr); /* 수정 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

repeat 함수는 반복되는 값을 자동으로 처리한다. 예를 들어, 위와 같이 설정하면 1fr 5fr 2fr, 1fr 5fr 2fr, 1fr 5fr 2fr 과 같이 1fr 5fr 2fr 을 세번 반복한다. 즉, 9개의 컬럼(열)을 생성하고, 1:5:2, 1:5:2, 1:5:2 의 비율로 반복하면서 너비를 분배한다.

minmax 함수

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem odit corrupti sequi error in quisquam officia deserunt. Magni dignissimos vitae quod voluptatibus nulla esse rem. Non dolore nam possimus totam!
    Sed sit tempora nam quis asperiores vero magni inventore, vel eius laborum ad in saepe doloribus quisquam consequatur ipsum, maiores non quibusdam reiciendis perferendis ducimus repudiandae officia. Eius, ipsum animi.
    Cumque voluptas maxime, minus itaque earum fugit animi illo, libero at quo, eaque omnis fuga mollitia aspernatur commodi nam sint nobis sequi consequuntur consequatur soluta porro pariatur laboriosam recusandae. Assumenda.</div>
    <div class="item">F</div>
    <div class="item">G</div>
    <div class="item">H</div>
    <div class="item">I</div>
  </div>
  
</body>
</html>

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr); /* 추가 */
  grid-template-rows: repeat(3, minmax(70px, auto)); /* 추가 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

minmax 함수는 최소값, 최대값을 지정할 수 있는 함수이다. grid-template-rows: repeat(3, minmax(70px, auto)) 의 의미는 우선 3개의 rows(행)을 만든다. 하나의 행의 높이는 아무리 컨텐츠 크기가 작더라도 최소 70px은 설정하고, 만약 컨텐츠 크기가 커서 70px로 컨텐츠를 다 담지 못하면 컨텐츠 크기만큼 자동으로 높이를 설정한다.

auto-fill 설정하기

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); /* 수정 */
  grid-template-rows: repeat(3, minmax(70px, auto)); /* 추가 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

grid-template-columns 에서 auto-fill 을 사용하면 columns(열)의 갯수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채운다. 컨테이너 전체너비가 100%이므로 각 아이템의 너비를 20%로 설정하면 한 행에 5개의 컬럼(열)을 생성한다. grid-template-rows 는 3개의 행을 생성하라고 설정하였지만, auto-fill 로 인해 3개의 행을 다 채우지 못하고 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem odit corrupti sequi error in quisquam officia deserunt. Magni dignissimos vitae quod voluptatibus nulla esse rem. Non dolore nam possimus totam!
    Sed sit tempora nam quis asperiores vero magni inventore, vel eius laborum ad in saepe doloribus quisquam consequatur ipsum, maiores non quibusdam reiciendis perferendis ducimus repudiandae officia. Eius, ipsum animi.
    Cumque voluptas maxime, minus itaque earum fugit animi illo, libero at quo, eaque omnis fuga mollitia aspernatur commodi nam sint nobis sequi consequuntur consequatur soluta porro pariatur laboriosam recusandae. Assumenda.</div>
    <div class="item">F</div>
    <div class="item">G</div>
    <div class="item">H</div>
    <div class="item">I</div>
    <div class="item">J</div>
    <div class="item">K</div>
    <div class="item">L</div>
    <div class="item">M</div>
    <div class="item">N</div>
  </div>
  
</body>
</html>

위와 같이 아이템을 더 추가하면 아래와 같이 3개의 행을 채운다.

컨테이너에 적용하는 속성들 (row-gap, column-gap)

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); 
  grid-template-rows: repeat(3, minmax(70px, auto)); 
  row-gap: 10px; /* 추가 */
  /* column-gap: 20px;  */
}
.container .item{
  background-color:  orange;
  /* margin: .1rem; */
}

아이템에 적용된 마진을 주석처리하고, 컨테이너에 row-gap 속성을 추가한다. 그럼 아래와 같이 row(행) 사이에 10px 만큼의 간격이 생긴다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); 
  grid-template-rows: repeat(3, minmax(70px, auto)); 
  row-gap: 10px; /* 추가 */
  column-gap: 20px; /* 추가 */
}
.container .item{
  background-color:  orange;
  /* margin: .1rem; */
}

column-gap 도 추가하면 아래와 같은 형태가 된다. auto-fill 이 적용되어 있으므로 원래는 5개의 컬럼(열)을 가져야 하지만, column-gap 때문에 미쳐 5개의 컬럼(열)을 채우지 못하고 5번째 아이템은 두번째 행으로 밀려난다. 또한, grid-template-rows 에 3을 설정하였으므로 원래는 3개의 행을 가져야 하지만, column-gap 때문에 미쳐 세번째 행을 다 채우지 못하고 4번째 행으로 밀려난다. 1~3번째 행은 minmax(70, auto)에 의하여 최소높이 70px, auto 로 잘 설정되었지만, 4번째 행은 글자높이만큼만 차지한다.

grid-template-rows: repeat(4, minmax(70px, auto));

4번째 행도 70px, auto 가 적용되려면 위와 같이 해주면 된다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); 
  grid-template-rows: repeat(4, minmax(70px, auto)); 
  gap: 20px; /* 추가 */
}
.container .item{
  background-color:  orange;
  /* margin: .1rem; */
}

행과 열의 간격을 동일하게 설정하려면 위와 같이 column-gap, row-gap 대신에 gap 이라고 설정하면 된다.

컨테이너에 적용하는 속성들 (grid-auto-columns, grid-auto-rows)

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); 
  grid-template-rows: repeat(3, minmax(70px, auto)); 
  gap: 20px; 
}
.container .item{
  background-color:  orange;
  /* margin: .1rem; */
}

앞서 예제에서 grid-template-rows 의 repeat 횟수를 다시 3으로 수정하였다. 이렇게 하면 column-gap 때문에 M, N 컨텐츠가 4번째 행으로 밀려나고 여기에는 최소높이 70px 이 적용되지 않는다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(auto-fill, minmax(20%, auto)); 
  grid-auto-rows: minmax(70px, auto); /* 추가 */
  gap: 20px; 
}
.container .item{
  background-color:  orange;
  /* margin: .1rem; */
}

이때 위와 같이 grid-template-rows 대신에 grid-auto-rows 를 설정하면 아래와 같이 4번째 행에 위치한 M, N에도 동일하게 최소높이 70px 이 적용된다. 이와 같이 row(행)의 갯수를 미리 알지 못하는 경우는 repeat 으로 미리 행의 갯수를 정하지 않고, grid-auto-rows 를 사용하면 유용하다.

그리드 기본개념 - 아이템에 적용하는 속성들

grid-column-start
grid-column-end
grid-column
grid-row-start
grid-row-end
grid-row
-ms-grid-row
-ms-grid-column
-ms-grid-row-span
-ms-grid-column-span

html, css 코드를 아래와 같이 수정하고 실습을 진행하도록 한다.

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
    <div class="item">F</div>
    <div class="item">G</div>
    <div class="item">H</div>
    <div class="item">I</div>
  </div>

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr); 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr); 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

/* 추가 */
.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

첫번째 아이템(A)의 크기는 row(행) 번호 1~2 와 column(열) 번호 1~3만큼 지정한다. 이렇게 하면 아래와 같이 아이템의 실제크기는 두개의 컬럼을 합친것만큼 차지한다.

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

이렇게 해도 동일하게 적용된다. grid-column 은 grid-column-start 와 grid-column-end의 축약형이다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr); 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
/* 수정 */
.item:nth-child(1) {
	grid-column: 1 / span 2;
	grid-row: 1 / span 3;
}

행 또는 열의 시작번호/끝번호를 지정하는 대신에 위와 같이 시작번호에서 몇개의 셀을 차지할지 span 이라는 키워드로 설정할 수 있다. 마치 html 의 table 에서 셀을 병합하는 것과 유사하다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: 50px; /* 수정 */
  grid-auto-columns: 1fr 3fr;  /* 추가 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

/* 추가 */
.item:nth-child(1) { grid-column: 2; }
.item:nth-child(2) { grid-column: 3; }
.item:nth-child(3) { grid-column: 4; }
.item:nth-child(4) { grid-column: 5; }
.item:nth-child(5) { grid-column: 6; }
.item:nth-child(6) { grid-column: 7; }

위와 같이 작성하면 첫번째 컬럼만 grid-template-columns 의 통제를 받아 50px로 폭이 고정되고, 나머지 컬럼들은 grid-auto-columns 에 따라 1:3 비율로 너비가 반복된다. 또한, 첫번째 아이템(A)은 grid-column:2 에 따라 2번째 컬럼(열)에 한칸을 차지한다. 끝번호를 정해주지 않으면 한칸을 의미한다.

grid-template-columns 와 grid-auto-columns 를 동시에 적용한 모습

컨테이너에 적용되는 속성들 - 정렬(align-items)

align-items 는 아이템들을 세로방향으로 정렬한다. 먼저 align-items: stretch는 컨테이너의 높이에 맞도록 아이템의 높이를 늘어뜨린다. 이 값은 디폴트 값이기 때문에 설정하지 않은 것과 동일하다.

.container{
  display: grid;
  border: 3px solid #333;
  
  /* 추가 */
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch; 
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-items: start 는 컨테이너 상단에 아이템을 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-items: center; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-items: center 는 아이템들을 세로방향으로 컨테이너 중앙에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-items: end; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-items: end 는 아이템들을 세로방향으로 컨테이너 하단에 배치한다.

컨테이너에 적용되는 속성들 - 정렬(justify-items)

justify-items 는 아이템들을 가로방향으로 정렬한다. 먼저 justify-items: stretch는 컨테이너의 너비에 맞도록 아이템의 너비를 늘어뜨린다. 이 값은 디폴트 값이기 때문에 설정하지 않은 것과 동일하다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch; /* 추가 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

justify-items: start 는 컨테이너 좌측에 아이템을 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

justify-items: center 는 아이템들을 가로방향으로 컨테이너 중앙에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  justify-items: end; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

justify-items: center 는 아이템들을 가로방향으로 컨테이너 우측에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  place-items: center start; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

place-items 속성은 align-items 와 justify-items 속성을 동시에 적용할 수 있는 단축속성이다. align-items, justify-items 순으로 작성하며, 하나의 값만 사용하면 align-items, justify-items 에 동일하게 적용된다. 현재는 아이템들을 세로방향으로 컨테이너 중앙에 배치하고, 가로방향으로는 컨테이너 좌측에 배치한다.

컨테이너에 적용되는 속성들 - 정렬(align-content)

앞서 align-items 가 아이템 각각을 정렬하는 것에 비해 align-content 는 아이템들을 통째로 정렬한다. 먼저 align-content: stretch 는 align-items: stretch 와 동일하며 설정하지 않아도 되는 디폴트 값이다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: stretch; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: start; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-content: start 는 아이템들을 통째로 세로방향으로 컨테이너 상단에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: center; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-content: center 는 아이템들을 통째로 세로방향으로 컨테이너 중앙에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: end; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-content: end 는 아이템들을 통째로 세로방향으로 컨테이너 하단에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: space-between; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-content: space-between 는 아이템들을 통째로 세로방향으로 컨테이너 상단과 끝점에 배치하고, 남은 아이템들은 동일한 간격으로 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  align-content: space-around; /* 수정 */
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}

align-content: space-around 는 아이템들을 통째로 세로방향으로 동일한 간격으로 배치한다.

컨테이너에 적용되는 속성들 - 정렬(justify-content)

앞서 justify-items 가 아이템 각각을 정렬하는 것에 비해 justify-content 는 아이템들을 통째로 정렬한다. 먼저 justify-content: stretch 는 설정하지 않아도 되는 디폴트 값이다. 실습을 하기에 앞서 grid-template-columns 속성을 제거한다. grid-template-columns 속성을 설정하면 가로방향으로 아이템의 너비를 컨테이너에 가득차도록 균등분배하기 때문에 justify-content 로 정렬이 되지 않는다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: stretch; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

위와 같이 작성하면 1~5번 아이템들은 5개의 컬럼에 균등분배되지만, 컬럼의 시작번호만 표기해뒀기 때문에 justify-content 로 정렬이 되며, 너비도 유동폭으로 변한다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: start; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

justify-content: start 는 아이템들을 통째로 가로방향으로 컨테이너 좌측에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: center; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

justify-content: center는 아이템들을 통째로 가로방향으로 컨테이너 중앙에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: end; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

justify-content: end는 아이템들을 통째로 가로방향으로 컨테이너 우측에 배치한다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: space-between; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

justify-content: space-between는 아이템들을 통째로 가로방향으로 컨테이너 좌측과 우측 끝점에 배치하고, 나머지 아이템들은 균등한 간격을 두고 배치된다.

.container{
  display: grid;
  border: 3px solid #333;
  justify-content: space-around; 
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

justify-content: space-around는 아이템들을 통째로 가로방향으로 좌우 균등한 간격을 두고 컨테이너 안에 배치된다.

.container{
  display: grid;
  border: 3px solid #333;
  place-content: space-between center;
  height: 100vh; /* 추가 */
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(1){ grid-column: 1; }
.container .item:nth-child(2){ grid-column: 2; }
.container .item:nth-child(3){ grid-column: 3; }
.container .item:nth-child(4){ grid-column: 4; }
.container .item:nth-child(5){ grid-column: 5; }

place-content 는 align-content, justify-content 를 동시에 설정하는 단축속성이다.

아이템에 적용되는 속성들 - 하나의 아이템만 정렬(align-self)

특정 아이템을 세로방향으로 정렬하려면 align-self 속성을 사용하면 된다. 아래는 두번째 아이템(B)에 align-self를 설정하여 세로방향으로 상단에 정렬하고 있다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  align-self: start;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  align-self: center;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  align-self: end;
}

아이템에 적용되는 속성들 - 하나의 아이템만 정렬(justify-self)

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  justify-self: start;
}

justify-content 는 아이템들을 통째로 이동해야 하기 때문에 grid-template-columns 로 아이템의 너비를 균등분배하면 정렬이 되지 않지만, justify-self 는 각 아이템들을 균등분배해놓고 균등분배한 셀 안에서 움직이기 때문에 제대로 적용이 된다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  justify-self: center;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  justify-self: end;
}

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.container .item:nth-child(2){
  place-self: start center;
}

place-self는 align-self, justify-self 를 한번에 지정할 수 있는 단축속성이다.

아이템에 적용하는 속성들 - 아이템의 순서변경(order)

html 문서 자체를 변경하는 것이 아니라 웹화면에서 보여지는 순서만 변경한다. 첫번째 행의 3개의 아이템 순서만 변경하였다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
}
.item:nth-child(1) { order: 3; } 
.item:nth-child(2) { order: 1; } 
.item:nth-child(3) { order: 2; } 
.item:nth-child(4) { order: 4; } 
.item:nth-child(5) { order: 5; } 
.item:nth-child(6) { order: 6; } 
.item:nth-child(7) { order: 7; } 
.item:nth-child(8) { order: 8; } 
.item:nth-child(9) { order: 9; }

아이템에 적용하는 속성들 - 레이어 이동하기 (z-index)

특정 아이템의 레이어를 변경하려면 아래와 같이 z-index 속성을 사용하면 된다.

.container{
  display: grid;
  border: 3px solid #333;
  grid-template-columns: repeat(3, 1fr);
  height: 100vh;
}
.container .item{
  background-color:  orange;
  margin: .1rem;
  border: 1px solid #333;
}
.item:nth-child(5) {
  z-index: 1;
  transform: scale(1.3);
}

그리드 실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Flexbox</title>
  </head>
  <body>
    <div class="parent">
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
      <div class="child">
        <div class="photo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTanQqHIEFktSr2BRREUz_9bUk-mGsVa2PBcA&usqp=CAU" alt=""></div>
        <div class="name">name</div>
      </div>
    </div>
  </body>
</html>

.parent {
  width: 50%;
  /* background: skyblue; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px;
  margin: 50px auto;
}
.child {
  height: 350px;
  background: tomato;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
}
.child:hover {
  transform: scale(1.01);
  opacity: 0.8;
}
.photo {
  width: 100%;
  height: 70%;
}
.photo img {
  width: 100%;
  height: 100%;
}
.name {
  width: 100%;
  height: 30%;
  text-align: center;
}

<div class="container">
  <div class="item">header</div>
  <div class="item">side a</div>
  <div class="item">main</div>
  <div class="item">side b</div>
  <div class="item">footer</div>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "   a    main    b   "
    "   .     .      .   "
    "footer footer footer";
}

.item {
  height: 200px;
  background: tomato;
  margin: 5px;
  text-align: center;
  line-height: 200px;
}
.item:nth-child(1) {
  grid-area: header;
}
.item:nth-child(2) {
  grid-area: a;
}
.item:nth-child(3) {
  grid-area: main;
}
.item:nth-child(4) {
  grid-area: b;
}
.item:nth-child(5) {
  grid-area: footer;
}

728x90

저작자표시 비영리 변경금지

'프론트엔드 > CSS' 카테고리의 다른 글

flex 없이 카드 레이아웃 만들기 (반응형 포함) (0)	2021.11.04
칼럼 (Column) 레이아웃 (0)	2021.10.24
반응형 웹 (Responsive web) (0)	2021.10.18
Flex (Flexible Box) 기본 이론 (0)	2021.10.16
CSS 선택자(Selector)와 속성들 (0)	2021.10.10

현재글Grid 기본이론

250x250

웹개발과 일상에 대해 포스팅하는 블로그입니다.

데이터베이스 쿼리연습, 배열, 히로쿠 서버, express 배포, NoSQL, node.js todo, 몽고디비 쿼리연습, em, 부트스트랩 연습, Array, 자바스크립트 배열, node.js 프로젝트, 몽고디비 연동, 리액트 스타일링, 컴포넌트 스타일링, 노드 프로젝트, MongoDB, 리액트 연습문제, 리액트 연습과제, 몽고디비,

Today :
Yesterday :