목차
CSS Tutorial – Full Course for Beginners
Lesson 15 – Grid Layout
.container {
min-height: 400px;
display: grid;
/* grid-auto-flow: column; */
/* grid-template-columns: 2fr 1fr 1fr; */
/* grid-template-columns: 200px 1fr 1fr; */
grid-template-columns: repeat(2, 1fr 2fr);
grid-auto-rows: minmax(150px, auto);
/* row-gap: 1em; */
gap: 1rem;
}
- grid-auto-flow: 열 정렬, 행 정렬 결정
- grid-template-columns: 3개의 컬럼, 각각의 크기로 정렬
- repeat(2, 1fr 2fr): 6개의 아이템이라면 2열씩 2번 반복해서 한 행에 4열이 들어감
- grid-auto-row: 세로 크기 결정
- minmax(150px, auto): 최소 150px, 최대는 컨테이너 높이에 맞춰서 자동 지정
- row-gap: 열 간격
- gap: 행/열 간격
- 각 속성은 row – columns 쌍으로 존재하므로 필요한 경우에 맞춰서 사용
.box:first-child {
background-color: #00f;
grid-column-start: 1;
grid-column-end: 4;
}
.box:first-child {
background-color: #00f;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
- grid-column-start & end: (가장 왼쪽 열 부터) 시작 열과 끝 열을 지정
- grid-row-start & end: (가장 위쪽 행 부터) 시작 행과 끝 행을 지정
-> grid는 dev tool 에서도 볼 수 있답니다!
.box:first-child {
background-color: #00f;
grid-column: 1 / 4;
grid-row: 1 / 3;
}
- grid-column, grid-row로 축약형도 가능
.box:first-child {
background-color: #00f;
display: grid;
align-content: center;
justify-content: center;
place-content: center center;
}
- align-content: 아이템 안의 콘텐츠를 세로 방향 정렬
- justify-content: 아이템 안의 콘텐츠를 가로 방향 정렬
- place-content: 축약형
<body>
<header class="header el">
<h1>Header</h1>
</header>
<main class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</main>
<aside class="sidebar el">
<h2>Sidebar</h2>
</aside>
<footer class="footer el">
<h2>Footer</h2>
</footer>
</body>
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: 75px auto 75px;
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"mn mn mn mn mn mn mn sb sb"
"ft ft ft ft ft ft ft ft ft";
gap: 1rem;
}
.el {
background-color: rebeccapurple;
color: #fff;
display: grid;
place-content: center;
}
.header {
grid-area: hd;
}
.sidebar {
grid-area: sb;
background-color: blue;
}
.footer {
grid-area: ft;
}
.container {
grid-area: mn;
...
}
- grid-template-areas: 각각의 아이템에 이름을 정한 후 선택자마다 지정할 수 있음
- 아까 .container 에 지정한 그리드가 남아있으므로 nested한 grid가 된 것!