CSS / CSS Grid үндэс

CSS Grid үндэс

CSS Grid нь вэб layout-ийн хамгийн хүчтэй хэрэгсэл юм. Flexbox нэг тэнхлэгт (мөр эсвэл багана) ажилладаг бол Grid хоёр тэнхлэгт (мөр ба багана) нэгэн зэрэг ажилладаг. Нарийн, тогтмол бүтэцтэй layout-д Grid тохиромжтой.

display:grid

css

.container {
  display: grid;
}

Энэ нь container-ийг grid болгоно. Харин баганыг тодорхойлохгүй бол бүх item нэг баганад жагсана.

grid-template-columns — баганын тохируулга

css

.container {
  display: grid;

  grid-template-columns: 200px 200px 200px; /* 3 тогтмол багана */
  grid-template-columns: 1fr 1fr 1fr; /* 3 тэнцүү багана */
  grid-template-columns: 300px 1fr; /* тогтмол + уян хатан */
  grid-template-columns: repeat(3, 1fr); /* дээрхтэй ижил товч бичлэг */
  grid-template-columns: repeat(4, 200px); /* 4 ширхэг 200px багана */
}

fr unit — урьд өмнө байгаагүй нэгж

fr (fraction — хэсэг) нь grid-д зориулагдсан тусгай нэгж. Үлдсэн зайг пропорциональ хуваана:

css

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* Нийт 4 хэсэг: зүүн=25%, дунд=50%, баруун=25% */
}

css

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* зүүн тал тогтмол 250px, баруун тал үлдсэн бүх зайг авна */
}

grid-template-rows — мөрийн тохируулга

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 1fr 60px; /* гарчиг, агуулга, footer */
}

gap — зай тавих

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 20px; /* мөр ба багана хоёулаа 20px */
  gap: 16px 24px; /* row-gap 16px, column-gap 24px */
  row-gap: 16px;
  column-gap: 24px;
}

Grid container ба grid item

html

<div class="grid-container">
  <!-- Grid container -->
  <div class="item">1</div>
  <!-- Grid item -->
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

css

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 баганатай */
  gap: 16px;
}

.item {
  background: #0f172a;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
}
/* Item-ууд автоматаар 2 мөрт хуваагдана: 1,2,3 / 4,5,6 */

repeat() функц

css

.container {
  grid-template-columns: repeat(3, 1fr);
  /* === */
  grid-template-columns: 1fr 1fr 1fr;

  grid-template-columns: repeat(2, 200px 1fr);
  /* === */
  grid-template-columns: 200px 1fr 200px 1fr;
}

Бодит жишээ — мэдээний сайт layout

css

.news-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* мэдээ өргөн, sidebar нарийн */
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  min-height: 100vh;
}

html

<div class="news-layout">
  <header>Гарчиг</header>
  <aside>Sidebar</aside>
  <main>Үндсэн мэдээ</main>
  <aside>Зар</aside>
  <footer>Footer</footer>
</div>

Flexbox vs Grid — хэзээ аль нь?

| Тохиолдол | Хэрэглэх | | ---------------------------------- | -------- | | Нэг мөр эсвэл нэг баганын layout | Flexbox | | Хоёр хэмжээст (мөр + багана) | Grid | | Item-ийн хэмжээ агуулгаас хамаарна | Flexbox | | Тогтмол grid бүтэц | Grid | | Navigation, button group | Flexbox | | Хуудасны ерөнхий layout | Grid |

Grid ба Flexbox хоёрыг хамт ашиглаж болно. Хуудасны ерөнхий layout-д Grid, тэр дотрох жижиг хэсгүүдэд Flexbox хэрэглэх нь нийтлэг.

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

grid-template-areas ашиглан нэртэй бүс тодорхойлж, layout-ийг уншихад хялбар болгох талаар судална. Header, main, sidebar, footer бүхий бүрэн хуудасны layout зохионо.

← Өмнөх хичээлFlex wrap ба order Дараах хичээл →Grid template areas