CSS 그리드 블로그 게시물

CSS 그리드 기초

CSS 그리드 레이아웃은 주로 웹 페이지 레이아웃에 사용되는 2D 그리드 기반 레이아웃 시스템입니다. CSS 그리드는 행과 열을 사용하고 플로트와 위치 지정을 사용할 필요가 없기 때문에 웹 페이지 디자인에 매우 인기가 있습니다.

정의

그리드 요소 - 그리드 시스템에는 상위 요소와 하위 요소가 포함됩니다.
예: <div class="grid-container"> <div class="grid-item">1</div>

표시 속성 - CSS에서 "표시"속성이 격자로 설정된 경우 특정 HTML 요소가 격자 컨테이너가 됩니다. 또한 그라인드 컨테이너의 모든 자식은 그리드 항목이 됩니다.
예: .grid-container {display: grid;}

그리드 열/행/간격- 그리드 열은 그리드의 수직선이고 행은 수평선이며 간격은 각 열과 행 사이의 공간입니다.
예: grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px; grid-gap: 50px;

그리드 컨테이너 - 그리드 컨테이너는 열과 행 내부에 있는 그리드 항목을 "포함"합니다.
예: .grid container {display: grid;}

그리드-템플릿 열 속성 - 이 속성은 지정된 그리드 레이아웃의 열 수를 정의하고 각 열의 너비를 정의할 수 있습니다.
예: .grid-container { display: grid; grid-template-columns: 80px 200px auto 40px; }

Grid-Template Rows 속성 - columns 속성과 마찬가지로 rows 속성은 각 레이아웃의 행 수를 정의하고 각 행의 높이를 정의할 수 있습니다. 예: .grid-container { display: grid; grid-template-rows: 80px 200px; }

아래는 열, 행, 간격, 패딩 및 높이를 포함하는 샘플 그리드 컨테이너입니다.

#childCostumeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px 300px 300px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;
}

피그마 예시

아래 이미지는 파트너와 함께 작업할 웹사이트의 스케치입니다. 실행하기 전에 행동 계획을 세우는 것이 중요합니다. 정말 도움이 됩니다!

CSS 그리드 샘플 웹사이트

이 샘플 웹사이트에서 제 파트너와 저는 CSS 그리드를 활용하여 의상 쇼핑을 위한 웹사이트를 만들었습니다.

먼저 탐색 모음을 입력하여 사용자가 "성인", "청소년"또는 "어린이"를 클릭하여 각 범주 내의 의상을 볼 수 있는 제목을 웹사이트에 제공했습니다.


다음으로 우리는 홈페이지에서 CSS Grid를 사용하여 각 의상 유형의 범주를 성인, 청소년 및 아동으로 그리드 컨테이너로 분리했습니다.
암호:

#buttonGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 345px 345px 345px 345px 345px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;

결과:

마지막으로 웹 사이트의 각 성인, 청소년 및 아동 섹션에서 CSS 그리드를 사용하여 각 범주 내에서 의상 옵션을 배치했습니다. 또한 각 그리드 컨테이너 내에서 #am ID를 사용하여 의상 이미지를 가져왔습니다. 이렇게 하면 페이지 레이아웃이 단순히 CSS 그리드를 사용하여 범주당 의상 선택 항목이 3행 3열인 의상 선택 항목처럼 보입니다!
암호:

#adultCostumeGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 345px 345px 345px 345px 345px;
  grid-row-gap: 50px;
  grid-column-gap: 40px;
  padding: 20px 80px 20px 80px;
  height: auto;
  background-color: black;
} 
#am1 {
  background-image: url('Images/am1.jpg');
  background-size: cover;
}

#am2 {
  background-image: url('Images/am2.jpg');
  background-size: cover;
}
#am3 {
  background-image: url('Images/am3.jpg');
  background-size: cover;
}

결과:


전반적으로 CSS Grid를 사용하면 이미지와 컨테이너를 쉽게 정렬하고 분리할 수 있었고 다소 복잡한 웹사이트 제작 프로세스를 단순하게 만들 수 있었습니다. 약간의 연습을 통해 CSS Grid를 활용하여 웹사이트를 돋보이게 하고 체계적으로 보이도록 만들면서 자신만의 웹사이트를 만들 수 있습니다!

출처:
https://costume-emporium.cadenserrato.repl.co/adult.html
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.w3schools.com/css/css_grid.asp