МОДУЛ 03 / УРОК 06

CSS Grid — оформление в две измерения

Научи как да създаваш оформления с редове и колони, да разпределяш елементи в мрежа и да изграждаш адаптивни галерии и уеб интерфейси.

HTML & CSSИнтерактивен урок12. клас

01 / НАУЧИ

Какво е CSS Grid?

CSS Grid е система за оформление на уеб страници в две измерения — редове и колони. За разлика от Flexbox, който основно работи по една ос, Grid позволява да управляваме едновременно хоризонталното и вертикалното разположение.

С display: grid превръщаме елемента в Grid контейнер, а сgrid-template-columns определяме колоните.

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

Единицата fr представлява дял от наличното свободно пространство в мрежата. Функцията repeat() ни позволява да повтаряме еднакви размери на колони.

02 / РАЗГЛЕДАЙ

CSS Grid Playground

Променяй броя колони, разстоянията и височината на редовете. Изпробвай как първият елемент може да заеме две колони.

Настройки на CSS Grid

Брой колониРазстояние между елементите12pxВисочина на редовете80pxПървият елемент заема две колони

Генериран CSS

03 / ПРОМЕНИ

Експериментирай с CSS Grid

Променяй grid-template-columns,grid-auto-rows и gap. Добави grid-column: span 2към първия елемент и наблюдавай резултата.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<div class="grid-container">
  <div class="grid-item">01</div>
  <div class="grid-item">02</div>
  <div class="grid-item">03</div>
  <div class="grid-item">04</div>
  <div class="grid-item">05</div>
  <div class="grid-item">06</div>
</div>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 90px;
  gap: 12px;
}

.grid-item {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #d52f38;
  color: white;
  font-size: 22px;
  font-weight: bold;
}

04 / СЪЗДАЙ

Създай адаптивна галерия

Използвай CSS Grid, за да подредиш шестте карти в три колони. След това направи първата карта широка две колони.

За адаптивност използвайminmax(0, 1fr) и добави@media правило за по-малки екрани.

Изисквания към задачата

display: grid за .gallery.
Три еднакви колони с repeat().
gap: 16px.
Колони с minmax(0, 1fr).
Първата карта заема две колони.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<main class="gallery">
  <article class="card">Проект 01</article>
  <article class="card">Проект 02</article>
  <article class="card">Проект 03</article>
  <article class="card">Проект 04</article>
  <article class="card">Проект 05</article>
  <article class="card">Проект 06</article>
</main>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.gallery {
  padding: 16px;
  border-radius: 12px;
  background: #dbe5f2;
}

.card {
  display: grid;
  place-items: center;
  min-height: 100px;
  padding: 16px;
  border-radius: 10px;
  background: #182235;
  color: white;
}

/*
  ЗАДАЧА:
  1. Превърни .gallery в Grid контейнер.
  2. Създай три еднакви колони.
  3. Добави gap: 16px.
  4. Използвай адаптивни колони с minmax().
  5. Направи първата карта широка две колони.
*/

05 / ПРОВЕРИ

Провери петте CSS Grid изисквания към галерията.

Резултатите ще се появят тук след проверката.