Grid
그리드 레이아웃을 사용하기 위해서는 column(열), row(행)을 지정해줘야 함. 또한 flexbox와 같이 부모 요소에서 grid를 지정해준다.
grid-template-columns
원하는 만큼의 column 개수를 적어라 → 각각의 넓이를 가지는 열이 4개가 생성됨.
grid-template-columns: 20px 50px 30px 10px;grid-template-rows
원하는 만큼의 row의 개수를 적어라 → 각각의 넓이를 가지는 행이 4개가 생성됨.
grid-template-rows: 100px 50px 300px 200px;gap
column이나 row 사이의 여백을 줌
column-gap: 15px; /* column 사이에 15px의 여백을 준다 */
row-gap: 20px; /* row 사이에 20px의 여백을 준다 */
gap: 10px; /* column, row 사이에 10px의 여백을 준다 */repeat( )
CSS 상에서 쓰는 함수. 같은 너비의 행이나 열을 여러 개 지정할 때 사용
grid-template-columns: repeat(4, 100px);→ 100px을 가지는 4개의 열(column)을 만든다.grid-template-areas
직관적으로 layout을 디자인한다. 이때 지정한 area에 대한 이름을 꼭 지정해줘야 한다.
....
<body>
<div class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>
.....grid {
display: grid;
grid-template-columns: repeat(4, 200px);
grid-template-rows: 100px repeat(2, 200px) 100px;
grid-template-areas:
“header header header header”
“content content content nav”
“content content content nav”
“footer footer footer footer”;
}
.header {
grid-area: header;
}
.content {
grid-area: content;
}
.nav {
grid-area: nav;
}
.footer {
grid-area: footer;
}grid-column(row)-start / grid-column(row)-end
column이나 row의 시작 지점을 직접 지정한다.
.header {
grid-column-start: 1;
grid-column-end: 2;
}이때 start와 end의 기준은 column이 아니라 줄(line)이다. 따라서 grid-column(row)-end는 최대 column(row)의 개수+1까지이다.
FE 개발 공부중...💫