CSS / Grid template areas

Grid template areas

grid-template-areas нь layout-ийг нэрлэсэн бүс ашиглан зохиодог хамгийн уншихад хялбар Grid арга юм. CSS-ийг харахад хуудасны бүтэц шууд харагддаг.

Үндсэн синтакс

css
.container {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
}

Нэг хаалт = нэг мөр. Нэг үг = нэг grid cell. Нэг нэртэй нүднүүд нэгдэж нэг бүс болно.

grid-area — item-ийг бүсэд оноох

css
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}
html
<div class="container">
  <header class="header">Гарчиг</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Үндсэн агуулга</main>
  <footer class="footer">Footer</footer>
</div>

Бүрэн жишээ — хуудасны layout

css
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 56px;
  grid-template-areas:
    "header  header"
    "sidebar main  "
    "footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header {
  grid-area: header;
  background: #0f172a;
}
.sidebar {
  grid-area: sidebar;
  background: #0b1120;
}
.main {
  grid-area: main;
  padding: 24px;
}
.footer {
  grid-area: footer;
  background: #0f172a;
}

Layout нь дараах байдлаар харагдана:

код
+---------------------------+
|       header              |
+----------+----------------+
|          |                |
| sidebar  |      main      |
|          |                |
+----------+----------------+
|       footer              |
+---------------------------+

Хоосон нүд — цэг ашиглах

Бүсийн зарим нүдийг хоосон үлдээхэд . тэмдэг ашиглана:

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "logo  .     nav  "
    "hero  hero  hero "
    ".     main  .    ";
  /* дунд баганын logo ба nav хоорондох нүд хоосон */
}

Responsive — media query-тэй хослуулах

grid-template-areas-ийн хамгийн том давуу тал нь responsive layout бичихэд маш тодорхой болдог:

css
/* Гар утас — нэг баганатай */
.page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main  "
    "sidebar"
    "footer";
}

/* Том дэлгэц — sidebar хажуудаа */
@media (min-width: 768px) {
  .page {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main  "
      "footer  footer";
  }
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Dashboard layout жишээ

css
.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr 50px;
  grid-template-areas:
    "nav    header  header "
    "nav    stats   stats  "
    "nav    chart   sidebar"
    "nav    footer  footer ";
  height: 100vh;
  gap: 12px;
  padding: 12px;
}

.nav {
  grid-area: nav;
}
.header {
  grid-area: header;
}
.stats {
  grid-area: stats;
}
.chart {
  grid-area: chart;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

Зөвлөмж

grid-template-areas-д нэр зэрэгцүүлэн бичвэл layout нь нүдэнд тодорхой харагдана:

css
/* Муу — уншихад хэцүү */
grid-template-areas: "h h" "s m" "f f";

/* Сайн — харахад л layout харагдана */
grid-template-areas:
  "header  header"
  "sidebar main  "
  "footer  footer";

Дараагийн хичээлд:

Grid-ийн дэвшилтэт боломжуудыг судална: grid-column, grid-row, span, auto-fill, auto-fit, minmax(). Item-ийг нэгээс олон нүдэнд дэлгэн байрлуулах арга.

← Өмнөх хичээлCSS Grid үндэсДараах хичээл →Grid advanced