CSS [7] – Grid(그리드) 주요 속성 정리

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: (가장 위쪽 행 부터) 시작 행과 끝 행을 지정
.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가 된 것!

Leave a Reply

Your email address will not be published. Required fields are marked *