CSS / Grid advanced

Grid advanced

Энэ хичээлд Grid-ийн дэвшилтэт боломжуудыг судална: item-ийг олон нүдэнд дэлгэх, автомат responsive grid үүсгэх, minmax() ашиглах.

grid-column ба grid-row — нүд заах

Grid item хаанаас хаана хүртэл байрлахаа тодорхойлж болно. Grid-ийн шугамыг 1-ээс тоолно:

css

.item {
  grid-column: 1 / 3; /* 1-р шугамаас 3-р шугам хүртэл = 2 багана */
  grid-row: 1 / 2; /* 1-р шугамаас 2-р шугам хүртэл = 1 мөр */
}

код

Шугам:  1    2    3    4
        |    |    |    |
Мөр 1:  +----+----+----+
        | 1/3 багана  |
Мөр 2:  +----+----+----+

span — хэдэн нүд эзлэх

Шугамын дугаарыг мэдэхгүй байхад span ашиглах нь тохиромжтой:

css

.item {
  grid-column: span 2; /* 2 багана эзлэнэ */
  grid-row: span 3; /* 3 мөр эзлэнэ */
}

/* Эхлэх цэг + span хослуулах */
.item {
  grid-column: 2 / span 3; /* 2-р шугамаас эхлэн 3 багана */
}

Жишээ — gallery:

css

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.featured {
  grid-column: span 2; /* онцлох зураг 2 дахин өргөн */
  grid-row: span 2; /* 2 дахин өндөр */
}

html

<div class="gallery">
  <div class="featured">Том зураг</div>
  <div>Жижиг 1</div>
  <div>Жижиг 2</div>
  <div>Жижиг 3</div>
  <div>Жижиг 4</div>
</div>

minmax() — хамгийн бага ба их хэмжээ

Баганын хамгийн бага ба хамгийн их хэмжээг зэрэг тодорхойлно:

css

.container {
  display: grid;

  /* Баганын өргөн хамгийн багадаа 200px, ихдээ 1fr */
  grid-template-columns: repeat(3, minmax(200px, 1fr));

  /* Мөрийн өндөр хамгийн багадаа 100px, ихдээ автомат */
  grid-template-rows: repeat(3, minmax(100px, auto));
}

auto-fill — автоматаар дүүргэх

Хэдэн багана байхыг тодорхойлохгүйгээр боломжтой бол аль болох олон багана үүсгэнэ:

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Дэлгэц өргөн байвал олон багана, нарийн байвал цөөн багана — автомат! */

auto-fit — хоосон баганыг хаах

auto-fill-тэй ижил боловч item цөөн байвал хоосон баганыг хааж, үлдсэн item-ийг тэлдэг:

css

/* auto-fill: хоосон багана үлдэнэ */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

/* auto-fit: хоосон баганыг хаана, item-ууд тэлнэ */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Хэзээ аль нь:

auto-fill — тогтмол grid хэмжээтэй байх шаардлагатай үед
auto-fit — item-ууд дэлгэцийг дүүргэх ёстой үед

Implicit vs explicit grid

grid-template-columns/rows-д тодорхойлсон grid нь explicit (тодорхой) grid юм. Тодорхойлсноос илүү item байвал Grid автоматаар implicit (далд) grid үүсгэнэ:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 багана тодорхойлсон */
  /* 6 item байвал 2 мөр автомат үүснэ */
}

Implicit мөрийн хэмжээг grid-auto-rows-аар удирдна:

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto); /* автоматаар үүссэн мөр бүрийн өндөр */
}

Бодит жишээ — responsive card grid

css

/* Media query хэрэгтэйгүй! */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
  padding: 20px;
}

.card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
}

/* Онцлох карт: 2 баганад дэлгэнэ */
.card-featured {
  grid-column: span 2;
}

html

<div class="card-grid">
  <div class="card card-featured">Онцлох мэдээ</div>
  <div class="card">Энгийн карт</div>
  <div class="card">Энгийн карт</div>
  <div class="card">Энгийн карт</div>
</div>

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

Responsive дизайны үндэс — fluid layout, flexible image, viewport unit (vw, vh) болон media query-г судална. Desktop-first ба mobile-first хоёр аргын ялгааг тайлбарлана.

← Өмнөх хичээлGrid template areas Дараах хичээл →Responsive дизайн үндэс