CSS 그리드 레이아웃

8547 단어 programmingwebdevproductivitycss

소개



페이지를 주요 영역으로 나누거나 HTML 프리미티브로 구성된 컨트롤 구성 요소 간의 관계를 지정하는 경우 CSS 그리드 레이아웃이 탁월합니다. 그리드 레이아웃을 사용하면 개발자가 표와 유사하게 개체를 열과 행에 정렬할 수 있습니다. 그러나 CSS 그리드를 사용하면 테이블보다 훨씬 더 많은 레이아웃이 가능하거나 간단합니다. 예를 들어 CSS 위치 지정 구성 요소와 같이 그리드 컨테이너의 자식 요소는 실제로 겹치고 레이어되도록 위치를 지정할 수 있습니다.

플로트 및 위치 지정을 요구하는 대신 CSS 그리드 레이아웃 모듈은 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공합니다.

📌그리드 요소: 부모 요소와 하나 이상의 자식 요소가 그리드 레이아웃을 구성합니다.

예시;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: blue;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>

</html>




📌Display 속성: HTML 요소의 display 속성이 grid 또는 inline-grid로 설정되면 그리드 컨테이너로 변환됩니다.

예시;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>


<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>

</html>




중요한 용어



📌그리드 열: 열은 그리드 요소를 구성하는 수직선입니다.



📌그리드 행: 행은 그리드의 요소를 구성하는 수평선입니다.



📌격자 간격: 간격은 각 열 또는 행 사이에 존재하는 공간입니다.



📌격자선: 기둥선은 기둥을 구분하는 선입니다. 행 선은 행을 구분하는 선입니다.



CSS 그리드 컨테이너



그리드 컨테이너로 작동하려면 HTML 요소의 표시 속성을 grid 또는 inline-grid로 설정해야 합니다.
그리드 컨테이너는 열과 행으로 정렬된 그리드 요소로 구성됩니다.

그리드 템플릿 열



grid-template-columns 매개변수는 각 열의 너비와 그리드 레이아웃의 열 수를 지정할 수 있습니다. 공백으로 구분된 목록인 값의 각 값은 특정 열의 길이를 지정합니다. 네 개의 열을 포함하려면 그리드 레이아웃에서 네 개의 열 너비를 지정하거나 모든 열의 너비를 동일하게 하려면 "자동"을 선택하세요.

예(열이 4개인 그리드);

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

</body>

</html>




그리드 템플릿 행



각 행의 높이는 grid-template-rows 속성에 의해 결정됩니다.

예시;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

</body>

</html>




콘텐츠 정당화



컨테이너 내부의 전체 그리드는 justify-content 속성을 사용하여 정렬됩니다. justify-content 속성이 영향을 미치려면 그리드의 전체 너비가 컨테이너 너비보다 작아야 합니다.

예시;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; 
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>

</html>




콘텐츠 정렬



컨테이너 내부의 전체 그리드는 align-content 속성을 사용하여 세로로 정렬됩니다.

예시;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>


</body>

</html>




결론



CSS Grid는 반응이 빠르고 적응력이 뛰어납니다. 덕분에 2차원 레이아웃을 간단하게 구성할 수 있습니다. 또한 사용이 간편하며 대부분의 웹 브라우저는 CSS 그리드를 지원합니다. CSS 그리드를 사용하면 HTML 코드에서 훨씬 더 유연하고 깔끔한 마크업을 사용할 수 있습니다. 읽어 주셔서 감사합니다!
【Panoptic Segmentation】DeeperLab : DeepLab의 진화계?!
【Semantic Segmentation】 video의 연속성을 사용하여 data의 부피 증가

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage