티스토리 뷰

CSS

[CSS] 그리드(Grid)

Gentlemanjs 2022. 4. 15. 13:02

GRID

CSS 그리드 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 요소 간의 관계를 정의하는데 아주 탁월한 속성입니다. 플렉스는 한 방향 레이아웃 시스템이고 그리드는 두 방향(가로, 세로) 레이아웃 시스템이기 때문에 플렉스보다 더 복합적인 레이아웃을 표현할 수 있습니다.

grid 기본 문법 구조

<!DOCTYPE html>
<html>
	<head>
    	<title>GRID</title>
    	<style>
    	.container {
        	display: grid;
        }
    	</style>
    </head>
    <body>
    	<div class="container">
           <div class="item"></div>
           <div class="item"></div>
           <div class="item"></div>
        </div>
    </body>
</html>

div .container가 부모 요소가 되고 하위 요소인 div. item은 자식 요소가 됩니다.

grid 속성

grid-area

grid item의 크기와 위치를 설정해 grid를 배치합니다.

grid-auto-columns

grid container의 크기가 설정되지 않은 열에 대한 기본 크기를 설정합니다.

grid-auto-flow

자동 배치 항목이 grid에 삽입되는 방식을 설정합니다.

grid-auto-rows

grid container의 크기가 설정되지 않은 행에 대한 기본 크기를 설정합니다.

grid-column

특정 grid item 표시의 시작하고 끝낼 열을 한번에 설정합니다.

grid-column-end

특정 grid item의 표시를 끝낼 열을 설정합니다.

grid-column-gap

grid item 간의 열 사이 간격을 설정합니다.

grid-column-start

특정 grid item의 표시를 시작할 열을 설정합니다.

grid-gap

grid item 간의 열과 행 사이 간격을 한번에 설정합니다.

grid-row

특정 grid item 표시의 시작하고 끝낼 행을 한 번에 설정합니다.

grid-row-end

특정 grid item의 표시를 끝낼 행을 설정합니다.

grid-row-gap

grid item 간의 행 사이 간격을 설정합니다.

grid-row-start

특정 grid item의 표시를 시작할 행을 설정합니다.

grid-template

grid의 열과 행의 개수와 크기, 셀의 병합을 한번에 설정합니다.

grid-template-areas

명명된 grid 셀의 병합을 설정합니다.

grid-template-columns

grid의 열의 개수와 크기를 설정합니다.

grid-template-rows

grid의 행의 개수와 크기를 설정합니다.

grid

grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow 값을 한 번에 설정할 수 있습니다.

'CSS' 카테고리의 다른 글

[CSS] 웹폰트 사용법  (0) 2022.04.15
[CSS] diplay : flex  (0) 2022.04.14
[CSS] 픽셀(Pixel) 벡터(Vector)의 차이  (0) 2022.04.14
[CSS] 밑줄효과  (0) 2022.04.14
[CSS] 한줄 효과  (0) 2022.04.14

UP NEXT : CSS

댓글
© 2018 webstoryboy