웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

css grid 레이아웃 방법으로 정사각형, 직사각형 만들기

Last Modified : 2023-02-25 / Created : 2023-02-20
3,237
View Count
css를 사용하여 사각형을 만드는 방법은 다양합니다. 가장 쉽게 width와 height 값을 사용할 수 있죠. 오늘은 grid 레이아웃을 사용해서 사각형과 정사각형을 만들어보겠습니다.




# css grid-template 사용하여 사각형 만들기


grid를 사용하여 정사각형 또는 직사각형을 만들기 위해서는 css의 grid-template 속성을 사용합니다. 이 속성을 사용하면 자식 요소를 쉽게 사각형으로 만들 수 있습니다. 일반적으로 하나의 사각형을 만드는 것 보다는 여러개의 동일한 사격형을 만드는 데 사용됩니다.

grid-template은 자식 요소의 높이와 너비를 사용하기 위해 아래의 두 가지 속성으로 사용됩니다.

grid-template-columns
// 너비의 값 width를 설정하기

grid-template-rows
// 높이의 값 height를 설정하기


grid-template의 값으로 fr, px, % 등의 값을 사용할 수 있겠죠. 그럼 아래에서 간단한 예제를 만들어 보면서 자세히 알아보겠습니다.


! grid-template 사각형 예제 보기


여기서는 grid-template 속성을 사용하여 너비와 높이가 각각 200px, 200px인 정사각형을 만들겠습니다.


@ 너비와 높이가 각각 200px인 정사각형 만들기
먼저 html 코드입니다.
<div class="grid-container">
  <div class="grid-square"></div>
</div>

다음에 grid-template을 사용한 css 코드입니다.
.grid-container {
  display: grid;
   grid-template-columns: 200px;
  grid-template-rows: 200px;
}

.grid-square {
  border: 2px solid #000;
}

위 코드를 실행하면 아래와 같이 나타나게됩니다.
<div class="grid-container">
<div class="grid-square">200 x 200</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
}

.grid-square {
border: 2px solid #000;
}</style>

보시는 것처럼 손쉽게 정사각형을 만들었습니다. 아래에서는 동일한 크기의 사각형 여러 개를 만들어보겠습니다.


@ 100px, 100px 사각형 여러 개 만들기
이번에는 비슷하지만 다른 예제입니다. 좀 전의 절반 크기의 정사각형을 연속해서 3개 만드는 방법입니다. 반복해서 만드는 것이 grid layout의 장점을 가장 잘 사용한 부분이죠.

이제 아래와 같이 grid-template-columns와 grid-template-rows 값을 반복 사용되도록 조정하면 됩니다. 다음과 같이 속성 값을 변경할 수 있습니다.
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px;

  column-gap: 10px; // 컬럼 간격 10px
}

위 예제에서 grid-template-columns 속성과 grid-template-rows 속성에 반복된 3개 값을 연속해 사용하였습니다. 이제 코드를 실행하면 아래와 같이 나타나게 됩니다.
<div class="grid-container-2">
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
<div class="grid-square">100 x 100</div>
</div>
<style>
.grid-container-2 {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px;
column-gap: 10px;
}</style>


참고로 반복된 값을 각각 선언하지 않고 repeat()를 사용할 수도 있겠습니다. repeat()에 사용된 3과 100px은 3개의 자식 요소를 동일한 100px의 값을 가지게 한다는 의미입니다.
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-: repeat(3, 100px);
}

실제 코드는 위와 동일하게 동작하는 것을 알 수 있습니다.


여기까지 css의 grid 레이아웃을 사용하여 사각형 만드는 방법을 간략히 알아보았습니다.

Previous

[CSS] 엘리먼트의 논리적 이동 스타일 속성 알아보기. Logical properies

Previous

CSS will-change 스타일 속성 알아보기