웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
css를 사용하여 화면 그리드(grid) 레이아웃을 구현하는 가장 간단한 방법은 display: grid 또는 display: inline-grid를 사용하는 것입니다. 아래와 같이 css를 선언하여 사용합니다.
display: grid | inline-grid
grid는 격자를 의미하는데 css그리드 형태의 레이아웃을 구현할 때 이 방법을 사용하면 매우 쉽게 구현이 가능합니다. 그럼 아래에서 더 자세히 알아보겠습니다.
# CSS grid 설정하는 방법
먼저 display 속성 값을 그리드(grid)로 설정하면 사용 가능한 여러 css 속성(옵션)이 존재합니다. 그 전에 grid는 크게 container와 내부 아이템으로 나눌 수 있는데 각각 아래와 같은 css를 사용하여 설정합니다.
그리드를 사용할 때 가장 기본이 되는 css 값입니다.
이제 각각의 아이템의 길이, 높이 값을 설정할 수 있습니다.
다음은 그리드 아이템의 여백을 설정하는 방법입니다.
! 그리드 아이템 정렬하는 방법
그리드 아이템 정렬에는 가로, 세로 각각 justify-content, align-content css 속성을 사용하여 정렬을 결정합니다.
start, end, center, space-between, space-evenly 등등 다양한 값이 설정 가능합니다.
! 반복값 repeat 설정하는 방법
모든 그리드 아이템의 크기 등을 각각 설정하려면 어렵습니다. 이때 repeat 값을 grid-template에 사용할 수 있습니다.
grid-template-rows: repeat(count, height);
grid-template-columns: repeat(count, width);
위에서는 / 기호를 사용하여 height 그리고 width의 값을 각각 적용하였습니다. 위 코드는 아래와 같습니다.
참고로 설정 값으로 repeat를 사용할 수 있습니다. 단, IE에서는 적용되지 않습니다.
! grid 각각의 item 설정하기
각각의 아이템들을 설정할 때 아래와 같은 css 속성을 사용합니다. 그리드 아이템은 시작점과 끝점을 설정하여 크기를 조절할 수 있습니다. 시작점은 첫번째 좌측, 맨 상단부터 1이 됩니다.
아래는 축약 표현으로 함께 사용할 수 있습니다. 이 때 구분자는 '/'를 사용합니다.
이처럼 grid-column 또는 grid-row를 사용하면 다양한 형태의 grid 레이아웃을 매우 쉽게 만들 수 있습니다. 아래와 같은 모습도 가능하죠.
@ CSS grid 예제 1번
아래는 동일한 간격을 유지하면서 두 번째 아이템의 크기를 2배 더 크도록 시작점과 끝점을 설정한 예제입니다.
예제는 아래의 코드로 작성되었습니다.
다음은 CSS 스타일입니다.
위 컨테이너에서 모두 10%로 길이를 정하였지만 맨 아래 grid-column: 2 / 4를 설정하여 두 번째 요소만 두 배 길이를 가지게 되었습니다.
IE에서는 다음과 같이 적용해야합니다.
그리고 grid-gap css 속성은 적용되지 않으므로 margin 등을 사용하여 바꾸어 적용해야 합니다. 또 예전 방식의 grid 방법 적용해야 하죠.
아래처럼 변경해야 함
여기까지 css grid 레이아웃 적용 방법에 대하여 알아봤습니다.
display: grid | inline-grid
grid는 격자를 의미하는데 css그리드 형태의 레이아웃을 구현할 때 이 방법을 사용하면 매우 쉽게 구현이 가능합니다. 그럼 아래에서 더 자세히 알아보겠습니다.
# CSS grid 설정하는 방법
먼저 display 속성 값을 그리드(grid)로 설정하면 사용 가능한 여러 css 속성(옵션)이 존재합니다. 그 전에 grid는 크게 container와 내부 아이템으로 나눌 수 있는데 각각 아래와 같은 css를 사용하여 설정합니다.! container 설정하기 css속성
컨테이너는 그리드 아이템을 어떻게 정렬할 것인지 결정할 수 있으며 각 아이템의 width, height, 여백 등의 값을 컨테이너에서 설정 가능합니다.그리드를 사용할 때 가장 기본이 되는 css 값입니다.
display: grid;
display: inline-grid;
display: inline-grid;
이제 각각의 아이템의 길이, 높이 값을 설정할 수 있습니다.
grid-template-columns // column 길이를 설정함
Ex) grid-template-columns: 10% 20% 40%;
grid-template-rows // row 길이를 설정함
Ex) grid-template-rows: 50px 100px;
Ex) grid-template-columns: 10% 20% 40%;
grid-template-rows // row 길이를 설정함
Ex) grid-template-rows: 50px 100px;
다음은 그리드 아이템의 여백을 설정하는 방법입니다.
grid-column-gap // 아이템 column 사이의 여백 설정
grid-row-gap // 아이템 row 사이의 여백 설정
grid-gap // 아이템 사이의 여백 설정함
Ex) grid-gap: 10px 20px;
grid-row-gap // 아이템 row 사이의 여백 설정
grid-gap // 아이템 사이의 여백 설정함
Ex) grid-gap: 10px 20px;
! 그리드 아이템 정렬하는 방법
그리드 아이템 정렬에는 가로, 세로 각각 justify-content, align-content css 속성을 사용하여 정렬을 결정합니다.align-content // 세로 방향 정렬을 설정함
justify-content // 가로 방향 정렬을 설정함
justify-content // 가로 방향 정렬을 설정함
start, end, center, space-between, space-evenly 등등 다양한 값이 설정 가능합니다.
! 반복값 repeat 설정하는 방법
모든 그리드 아이템의 크기 등을 각각 설정하려면 어렵습니다. 이때 repeat 값을 grid-template에 사용할 수 있습니다.grid-template-rows: repeat(count, height);
grid-template-columns: repeat(count, width);
grid-template: repeat(10, 100px) / repeat(10, 100px);
위에서는 / 기호를 사용하여 height 그리고 width의 값을 각각 적용하였습니다. 위 코드는 아래와 같습니다.
grid-template-rows: repeat(10, 50px);
grid-template-columns: repeat(10, 100px);
grid-template-columns: repeat(10, 100px);
참고로 설정 값으로 repeat를 사용할 수 있습니다. 단, IE에서는 적용되지 않습니다.
! grid 각각의 item 설정하기
각각의 아이템들을 설정할 때 아래와 같은 css 속성을 사용합니다. 그리드 아이템은 시작점과 끝점을 설정하여 크기를 조절할 수 있습니다. 시작점은 첫번째 좌측, 맨 상단부터 1이 됩니다.grid-column-start // 컬럼의 시작 위치를 나타냄
Ex) grid-column-start: 1;
grid-column-end // 컬럼의 종료 위치를 나타냄
Ex) grid-column-end: 3;
grid-row-start // 아이템 로우의 시작 위치를 나타냄
Ex) grid-row-start: 1;
grid-row-end // 아이템 로우의 종료 위치를 나타냄
Ex) grid-row-end: 1;
Ex) grid-column-start: 1;
grid-column-end // 컬럼의 종료 위치를 나타냄
Ex) grid-column-end: 3;
grid-row-start // 아이템 로우의 시작 위치를 나타냄
Ex) grid-row-start: 1;
grid-row-end // 아이템 로우의 종료 위치를 나타냄
Ex) grid-row-end: 1;
아래는 축약 표현으로 함께 사용할 수 있습니다. 이 때 구분자는 '/'를 사용합니다.
grid-column // 아이템 컬럼의 시작과 끝 값
Ex) grid-column: 2 / 4;
grid-row // 아이템 row의 시작, 끝 값
Ex) grid-row: 3 / 5;
Ex) grid-column: 2 / 4;
grid-row // 아이템 row의 시작, 끝 값
Ex) grid-row: 3 / 5;
이처럼 grid-column 또는 grid-row를 사용하면 다양한 형태의 grid 레이아웃을 매우 쉽게 만들 수 있습니다. 아래와 같은 모습도 가능하죠.
<ul class="test__grid">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li class="space">Space</li>
</ul>
<style>
.test__grid {
display: grid;
align-content: center;
justify-content: center;
grid-template: repeat(3, 80px) / repeat(6, 10%);
grid-gap: 8px;
text-align: center;
list-style: none !important;
}
.test__grid li {
background: skyblue;
}
.test__grid .space {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
</style>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li class="space">Space</li>
</ul>
<style>
.test__grid {
display: grid;
align-content: center;
justify-content: center;
grid-template: repeat(3, 80px) / repeat(6, 10%);
grid-gap: 8px;
text-align: center;
list-style: none !important;
}
.test__grid li {
background: skyblue;
}
.test__grid .space {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
</style>
# css 그리드 레이아웃 예제보기
아래는 css 그리드를 사용한 예제입니다. 각각의 예제들이 어떻게 나타나는지 확인해보세요.@ CSS grid 예제 1번
아래는 동일한 간격을 유지하면서 두 번째 아이템의 크기를 2배 더 크도록 시작점과 끝점을 설정한 예제입니다.
<div class="grid-container-test">
<div class="grid-item">1</div><div class="grid-item item-2">2</div><div class="grid-item">3</div><div class="grid-item">4</div>
</div>
<style>
.grid-container-test { grid-template-columns: 10% 20% 10% 10%;
display: grid;
grid-template-rows: 50px;
justify-content: space-around;
}
.grid-container-test .grid-item {
border: 1px solid #000;
text-align: center;
background: green;
color: #Fff;
}
.grid-container-test .grid-item.item-2 {
grid-column: 2 / 4
}
</style>
<div class="grid-item">1</div><div class="grid-item item-2">2</div><div class="grid-item">3</div><div class="grid-item">4</div>
</div>
<style>
.grid-container-test { grid-template-columns: 10% 20% 10% 10%;
display: grid;
grid-template-rows: 50px;
justify-content: space-around;
}
.grid-container-test .grid-item {
border: 1px solid #000;
text-align: center;
background: green;
color: #Fff;
}
.grid-container-test .grid-item.item-2 {
grid-column: 2 / 4
}
</style>
예제는 아래의 코드로 작성되었습니다.
<div class="grid-container-test">
<div class="grid-item">1</div>
<div class="grid-item item-2">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<div class="grid-item">1</div>
<div class="grid-item item-2">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
다음은 CSS 스타일입니다.
.grid-container-test {
display: grid;
grid-template-columns: 10% 10% 10% 10%;
grid-template-rows: 50px;
justify-content: space-around;
}
.grid-container-test .grid-item {
border: 1px solid #000;
text-align: center;
background: green;
color: #fff;
}
.grid-container-test .grid-item.item-2 {
grid-column: 2 / 4
}
display: grid;
grid-template-columns: 10% 10% 10% 10%;
grid-template-rows: 50px;
justify-content: space-around;
}
.grid-container-test .grid-item {
border: 1px solid #000;
text-align: center;
background: green;
color: #fff;
}
.grid-container-test .grid-item.item-2 {
grid-column: 2 / 4
}
위 컨테이너에서 모두 10%로 길이를 정하였지만 맨 아래 grid-column: 2 / 4를 설정하여 두 번째 요소만 두 배 길이를 가지게 되었습니다.
! IE 11 호환성 관련
참고로 그리드(grid) css는 현재 IE 11에서 구현하려먼 일부 가능 및 prefix 또는 대체 css 사용으로 가능합니다. 다만 손이 많이 가고 복잡할 수 있습니다.IE에서는 다음과 같이 적용해야합니다.
display: -ms-grid;
-ms-grid-columns
-ms-grid-columns
-ms-grid-columns
-ms-grid-columns
그리고 grid-gap css 속성은 적용되지 않으므로 margin 등을 사용하여 바꾸어 적용해야 합니다. 또 예전 방식의 grid 방법 적용해야 하죠.
grid-template-columns
grid-template-rows
grid-template-rows
아래처럼 변경해야 함
-ms-grid-columns
-ms-grid-rows
-ms-grid-rows
여기까지 css grid 레이아웃 적용 방법에 대하여 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
