CSS - grid 그리드

프로그래밍/HTML & CSS 2021. 9. 23.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	/* 명시적으로 행/열의 크기를 지정 */
 	grid-template-rows : 100px auto 100px;
 	grid-template-columns:100px auto;
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

display에 grid 옵션을 주면 요소들을 그리드처럼 배치를 할 수 있다.

grid-template-rows : 100px auto 100px;

= 그리드 템플릿의 열 부분(세로)의 크기를 지정해 주는것

= 첫번째는 100px고 두번째는 자동 세번째도 100px

= width를 600px를 줬으니까 이 600에 맞춰서 auto가 나머지를 지정 한다.

grid-template-columns:100px auto; : 마찬가지로 첫번째만 100px고 나머지는 알아서 조정하라는 뜻.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box;
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	/* 영역 이름을 참조해 템플릿 생성 */
 	grid-template-rows : 100px auto 100px;
 	grid-template-columns:100px auto;
 	grid-template-areas: 
 	  "header  header"
 	  "nav body"
 	  "footer footer";
 	
 	font-weight: 900;
 	font-size: 25px;
}

.header {
	grid-area : header;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.nav {
	grid-area : nav;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.body {
	grid-area : body;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}

.footer {
	grid-area : footer;
	border: 1px solid blue;
	background: #99e9f2;
	display: flex;
	margin: 5px 5px;
	justify-content: center;
	align-items: center;
}


</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<header class="header">HEADER</header>
	<nav class="nav">NAV</nav>
	<article class="body">BODY</article>
	<footer class="footer">FOOTER</footer>
</div>


</body>
</html>

이번에는 영역에 이름을 줘서 그 이름을 가지고 템플릿의 크기나 기타 요소들을 주는 방법.

grid-template-rows, grid-template-columns를 사용해서 먼저 그리드의 기본 속성을 만들어 준다.

 	grid-template-areas: 
 	  "header  header"
 	  "nav body"
 	  "footer footer";

그리고 틀을 만들건데 왼쪽이 속성이고 오른쪽이 이름이다.

header 속성은 맨위에 한칸 둘거고 이걸 지칭하는 이름을 header이라고 한다.(이름은 내 맘대로 바꿔도 됨.)

그다음 nav속성을 2번째에 둘거고 이름은 body로 한다.

그리고 justify와 align-items를 안주면

사진 처럼 안에 내용물의 정렬이 안된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	grid-template:repeat(3, auto) / repeat(2, auto);
 		/* grid-template:repeat(3, 200px) / repeat(2, 300px); */ 
 	gap:10px; /* row-gap:10px; column-gap:10px; */
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

grid-template:repeat(3, auto) / repeat(2, auto);

이 방식은 반복의 개념이다.

이건 열과 행을 / 슬러시를 사용해서 나타낸건데

위에 말은 곧 열은3개 / 행은 2개로 그리드를 만들고 사이즈는 알아서 맞춰라 라는 뜻이다.

그리고 gap은 요소들 사이의 갭을 말한다. 갭이 0이면 박스들이 딱 달라붙는다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	/* 명시적으로 2개의 행과 2개위 열 크기 명시 */
 	grid-template-rows: 200px 200px;
 	grid-template-columns: 150px 150px;
 	/* 암시적인 행. 열의 크기를 정의 */
 	grid-auto-rows: 100px;
 	grid-auto-columns:100px;
 	
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

.item:nth-child(5) { /* 아이템 배치 */
	grid-row: 3/4;   /* start-line / end-line */
	grid-column:3/4;
}

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

이건 요소를 그리드 안에서 내가 원하는 위치에 배치할때 사용한다.

:nth-child(5)를 이용해서 item 클래스를 받는 속성의 5번째 자식 즉 5번에게 적용한다는 뜻

grid-row: 3/4; 배치할 자리의 열을 지정 3은 시작라인 4가 끝나는 라인
grid-column:3/4; 배치할 자리의 행을 지정 3은 시작라인 4가 끝나는 라인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	grid-template-rows: repeat(3, 1fr);
 	grid-template-columns: repeat(3, 1fr);
 	grid-auto-flow: row dense; /* 각 행 축을 따라 차례로 배치. 빈 영역을 메움 */
 	/* grid-auto-flow: column dense; */
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }

.item:nth-child(2) {
	grid-column:span 3; /* 3칸에 출력 */
}
</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

fr단위는 fr값을 제외하고 먼저 얼만큼의 공간이 분배 되었는지를 확인하고

그 다음 남은 공간들을 가지고 fr만큼 분할하는 것.

1fr이면 남은 공간들의 분할한 크기 중의 1이라는 뜻

grid-template-rows: repeat(3, 1fr);

=> 열에는 총 3개의 그리드를 넣을건데 높이는 600이니까 먼저 주고 3개를 600에 맞춰서 하나씩 배치 하라는 뜻

grid-auto-flow: row dense;

=> 각 행을 축에따라 차례로 배치

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	grid-template-rows: repeat(3, 100px);
 	grid-template-columns: repeat(3, 100px);
 	
 	align-content: center;
 	justify-content: center;
 	
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }
.item7 { background: rgb(169,80, 255); }
.item8 { background: rgb(95,95,95); }
.item9 { background: rgb(240,0,0); }

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
	<div class="item item7">7</div>
	<div class="item item8">8</div>
	<div class="item item9">9</div>
</div>


</body>
</html>

align-content: center;
justify-content: center;

옵션 덕분에 정 중앙 가운데로 온 모습

만약에 grid-auto-flow: column dense; 옵션을 주고

8번 요소를 빼버리면?

grid-auto-flow: column dense; 옵션 때문에 빈 공간을 차례로 채워주는데

column 은 열 순서대로 채우고

row는 행 순서대로 채움

원래는 반대가 아닌가 싶어서 헷갈림

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 600px; height: 600px; margin: 50px;
	background: #fff;
	border: 10px solid #eee;
	border-radius: 10px;
	
 	display: grid;
 	
 	grid-template-rows: repeat(4, 1fr);
 	grid-template-columns: repeat(3, 1fr);
}

.item {
	font-weight: 900; font-size: 25px;
	border: 1px solid #333;
	border-radius: 3px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.item1 { background: rgb(255,100,77); }
.item2 { background: rgb(255,165,0); }
.item3 { background: rgb(50,205,50); }
.item4 { background: rgb(255,105,180); }
.item5 { background: rgb(30,145,255); }
.item6 { background: rgb(169,169,169); }
.item7 { background: rgb(169,80, 255); }
.item8 { background: rgb(95,95,95); }
.item9 { background: rgb(240,0,0); }

.item1 {
	grid-column:1/4;
}
.item2 {
	grid-row:2/4;
}
.item3 {
	grid-column:2 / span 2;  /* 2열부터 두칸 */
}
.item6 {
	grid-column:1 / span 3; /* 1열부터 세칸 */
}

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

.item1 {
	grid-column:1/4;
}
.item2 {
	grid-row:2/4;
}
.item3 {
	grid-column:2 / span 2;  /* 2열부터 두칸 */
}
.item6 {
	grid-column:1 / span 3; /* 1열부터 세칸 */
}

이 코드들 때문에 그리드가 잘게 나뉘었는데

item1 클래스는 첫번째 열의 4개의 행의 위치에 있으라는 뜻 즉 첫번째 열의 4개의 칸을 다 차지하라는 뜻

grid-column:2 / span 2; => 2열부터 2칸 이라는 뜻

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	box-sizing: border-box; /* width에 border와 padding이 포함 */
}
.container {
	width: 800px; 
	margin: 50px;
	border-radius: 10px;
	
	padding: 20px;
	border: 1px solid #99e9f2;
	background: #e3fafc;	
	
 	display: grid;
 	grid-gap:40px;
 	
 	grid-template-rows: minmax(100px, auto);
 	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
 	/* auto-fill: 행열의 개수를 자동으로 조정. 남는 공간은 그대로 유지 */
 	grid-auto-flow: dense;
}

.container .item {
	border: 1px solid blue;
	border-radius: 3px;
	background: #99e9f2;
	font-size: 250%;
	color: #fff;
	
	display:flex;
	align-items: center;
	justify-content: center;
}

.container .item:nth-child(1) {
	grid-row-end: span 2;
}

.container .item:nth-child(2) {
	grid-row-end: span 3;
}

.container .item:nth-child(4) {
	grid-row-end: span 3;
}

.container .item:nth-child(5) {
	grid-column-end: span 2;
}

</style>

</head>
<body>

<h3>grid layout</h3>

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>


</body>
</html>

grid-template-rows: minmax(100px, auto);
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

auto-fill= 행과 열의 개수를 자동으로 조정함.

저작자표시

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

css - 티스토리 블로그 메뉴 사이드 바 없애기 (0)	2022.05.29
CSS - 이미지 2개로 효과주기 (버튼) (0)	2021.09.23
CSS - flex (0)	2021.09.23
CSS - 영역 관련 (0)	2021.09.23
CSS - float 개요 (0)	2021.09.22

ABOUT ME

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바