css-17: grid-template-columns,row,areas,start,end
gird-1
- 부모에게 display:grid적용
- 자식에게 색상, 폰트, flex, center 적용
1. grid-template-columns/rows
grid-template-columns : 세로 크기 값 정하기
grid-template-rows : 가로 크기 값 정하기
2. row-gap / column-gap / gap
row-gap : 가로 줄 간격 정하기
column-gap : 세로 줄 간격 정하기
gap: 가로, 세로 줄 간격 정하기
<body class="father">
<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>
</body>
.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에 있는 이름이 같아야 한다.
- 같은 영역은 전부 이어져 있어야 한다. (dot(.) 포함))
- 이어지더라도 ㄴ자, ㄱ자 등의 모양이면 안되고, 속이 비지 않은 사각형의 형태여야 한다. (가장 작은 단위도 하나의 속이 비지 않은 사각형으로 취급한다)
3. 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(개수, 크기)으로 더 쉽게 할 수 있다.
4. 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고정이다
5. grid-column-start / grid-column-end : 자식에게 설정
.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도 같은 방법으로 설정
6. shortcuts
1. grid-column / grid-rows
grid-column-start: 1;
grid-column-end: 5;
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
grid-column: 1/5;
2. 특정 줄부터 마지막까지 설정할때 (-1)
grid-column: 1/5;
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
grid-column: 1/-1;
뒤에서 부터 새면 -1 → -2 → -3 → -4 … 이기 때문에!
3. 시작점과 끝점을 적는것 = span
grid-column: 1/-1;
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
grid-column: span 4 //박스 4개 라는 뜻
- span은 cell, sqaure 등을 의미하기때문에 span 다음 몇 칸 차지할지 숫자를 적어주면 됨
.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: span 4;
}
주의할점: row나 column에서 시작점을 적어줘버리면 span이 꼬일수 있음!
댓글남기기