grid-1: grid-template-column,rows/repeat/areas/grid-column(rows)-start,end
grid-template-column,rows
- 부모에게 display:grid적용
- 자식에게 색상, 폰트, flex, center 적용
grid-template-columns: 세로 크기 값 정하기grid-template-rows: 가로 크기 값 정하기row-gap: 가로 줄 간격 정하기column-gap: 세로 줄 간격 정하기
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">4</div>
<div class="child">4</div>
.father {
display: grid;
gap: 10px;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 100px 50px 300px;
}
.child {
font-size: 50px;
background-color: brown;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
* grid- templates-areas가 적용되지 않을때 주의점
- 자식 GRID의 grid-area에 있는 이름과부모 GRID의 grid-template-areas에 있는 이름이 같아야 한다. 2 . 같은 영역은 전부 이어져 있어야 한다. (dot(.) 포함))
- 이어지더라도 ㄴ자, ㄱ자 등의 모양이면 안되고, 속이 비지 않은 사각형의 형태여야 한다.
- 가장 작은 단위도 하나의 속이비지 않은 사각형으로 취급한다
repeat
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px 300px 300px;
=
grid-template-columns: repeat(4, 200px);
grid-template-rows:repeat(4, 300px);
- grid-template-columns와 grid-template-rows에서 repeat(개수, 크기)으로 더 쉽게 할 수 있다.
grid-template-columns: repeat (2,200px)
grid-templete-areas
- layout을 좀더 직관적으로 보여줌
- 우리가 흔히 아는 사이트 형식대로 맨위는 헤더, 오른쪽에 nav, 가운데 콘텐츠, 맨밑에 footer로 설정
.grid {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: repeat(4, 200px);
grid-template-areas:
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer";
}
* 이렇게만 하면 작동이 안됨 *각 요소마다 grid-area 이름을 지정해줘야함
.header {
grid-area: header;
background-color: #2ecc71;
}
.content {
grid-area: content;
background-color: #3498db;
}
.nav {
grid-area: nav;
background-color: #8e44ad;
}
.footer {
grid-area: footer;
background-color: #f39c12;
}
* 컬럼을 4개 구성할때 auto의 경우 공간을 꽉 채우면서 각각의 블록이 동등하게
가져가지만 auto 200px의 경우 두번째 블록은 200px의 공간을 가져가고
나머지 공간을 3개의 블록이 동등하게 가져갑니다.
만약 auto 200px 100px 로 하더라도 같은 규칙이 적용됩니다.
하지만 grid-template-areas를 적용하지 않은 상태에서 auto 200px은 단순히 row가
2개이고, 첫번째 그리드의 width는 될수 있는 한 최대로 생기고,
두번째 그리드의 width는 200고정이다
grid-column-start / grid-column-end
- grid의 자식에게 설정해준다
.header {
background-color: #2ecc71;
grid-column-start: 1;
grid-column-end: 5;
}
* 첫번째 줄부터 5번째 줄까지 자리 차지하게 하기
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
grid-column-start: 1;
grid-column-end: 5;
}
.content {
background-color: #3498db;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.nav {
background-color: #8e44ad;
grid-row-start: 2;
grid-row-end: 4;
}
.footer {
background-color: #f39c12;
grid-column-start: 1;
grid-column-end: 5;
}
- row도 같은 방법으로 설정
shortcuts
grid-column / grid-rows
grid-column-start: 1;
grid-column-end: 5;
=
grid-column: 1/5;
특정 줄부터 마지막까지 설정할때 (-1)
grid-column: 1/5;
=
grid-column: 1/-1;
- 뒤에서 부터 새면 -1 → -2 → -3 → -4 … 이기 때문에!
시작점과 끝점을 적는것 = span
grid-column: 1/-1;
=
grid-column: span 4 //박스 4개 라는 뜻
- span은 cell, sqaure 등을 의미하기때문에 span 다음 몇 칸 차지할지 숫자를 적어주면 됨
<body class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</body>
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
grid-column: span 4;
}
.content {
background-color: #3498db;
grid-column: 1/-2;
grid-row: span 2;
}
.nav {
background-color: #8e44ad;
grid-row: span 2;
}
.footer {
background-color: #f39c12;
grid-column: sp
an 4;
}
* 주의할점: row나 column에서 시작점을 적어줘버리면 span이 꼬일수 있음!
댓글남기기