CSS Grid – всичко, което трябва да знаеш

В предишен урок те запознах с display: flex; и как използвайки съвременни CSS layout модели можеш да структурираш страницата си по начин, който да ѝ позволи да се адаптира спрямо устройство и ширина на браузър.

В тази статия ще ти покажа какво е CSS Grid и как можеш да създаваш далеч по-комплексни layout-и, които са двуизмерни (нищо сложно, обещавам ти).

Нека започнем от основите.

Какво е CSS Grid

Както ти споменах няколко реда по-горе, CSS Grid е layout модел, посредством който можем да създаваме двуизмерни изгледи. Казано на чист български – можем да поместваме елементи в решетка, като за всеки елемент можем да подаваме на колко реда или колони да се помещава. Ето и пример за това какъв layout може да постигнеш, използвайки CSS Grid:

Как да използваш CSS Grid

За да се възползваш от мощта на този модел, е необходимо да имаш контейнер с вместени в него деца (parent -> children), като родителя е този, на който подаваме свойството display: grid;

<style>
  .container {
      display: grid;
  }
</style>

<div class="container">
    <div class="item">Some content</div>
    <div class="item">Some content</div>
    <div class="item">Some content</div>
</div>

Но тук има една тънка уловка. Ако си спомняш, когато на даден контейнер зададем display: flex; – той веднага (автоматично) разпределя децата си в колони в един ред. Тук нещата не стоят така и само с този ред код – display: grid; няма да променим нищо в layout-а на дадения контейнер.

Сега ще ти обясня по-подробно.

Свойства на grid контейнера

С display: grid; подаваме основата, но са ни необходими още два реда код (всеки от които има свойство + стойност), а именно:

grid-template-columns

С това свойство подаваме колко колони ще има нашата решетка, като използваме следния синтаксис:

.container {
    grid-template-columns: 1fr 1fr 1fr;
}
    

От snippet-а по-горе става ясно, че ще имаме контейнер с три еднакви колони (като единицата fr идва от fraction).

Сигурно се питаш „а ако имам 6 колонен grid, това означава ли, че трябва да напиша grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr„?! Не. Имаме съкратено изписване с функцията repeat() за такива случаи:

.container {
    grid-template-columns: repeat(6, 1fr);
}
    

А какво ако искаме да имаме колони с различна ширина? Лесно е, можем да комбинираме както стойности, така и единици за подаване на колони:

.container {
    grid-template-columns: 50px auto 100px 1fr;
}
    

В края на тази статия ще ти разкрия и най-съвременният и лесен начин за създаване на grid, който е адаптивен, при това без да използваш media query-та 😉

grid-template-rows

Подобно на grid-template-columns, с това свойство задаваме колко реда искаме да има нашата решетка:

.container {
    grid-template-rows: 80px auto 80px; 
}
    

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

gap

CSS Grid идва и със свойство за задаване на отстояния между отделните колони и редове. Тук можем да подходим по два начина: или да подадем една стойност на gap, като тя ще се отнася и за редове, и за колони, или пък да подадем т.нар. shorthand стойност, като първото число ще е отстоянието между колоните, а второто – между редовете:

.container {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 80px auto 80px 
    gap: 25px 20px;
}

justify-items

А как подреждаме съдържанието на клетките по хотизонтала? По няколко начина, а именно:

.container {
    justify-items: start;
    /* justify-items: end;
    justify-items: center;
    justify-items: stretch; */
}

В горния snippet съм ти показала как може да подравниш съдържанието на всяка клетка в нейното начало, а като закоментиран код – в края, в центъра и от край до край.

align-items

За да подравним елементите във всяка клетка по вертикала, то ще използваме align-items свойството, като и тук имаме няколко опции – най-горе, в средата и в дъното на клетката:

.container {
    align-items: start;
    /* align-items: end;
    align-items: center; */
}

Свойства на grid елемента (клетката)

Най-голямата магия на CSS grid идва със свойствата, които можем да подадем на всяка от индивидуалните клетки в решетката/мрежата. Например – можем да накараме една клетка да заема две колони, или пък да е разположена на два реда. Нека видим как става това.

grid-column-start / grid-row-start

С grid-column-start определяме от коя колона започва нашата клетка, а с grid-row-start – от кой ред:

.item {
    grid-column-start: 2;
    grid-row-start: 3;
}

Аналогично, за да определим в коя колона завършва дадената клетка, както и в кой ред, използваме grid-column-end и grid-row-end:

.item {
    grid-column-end: 2;
    grid-row-end: 3;
}

Имаме и т.нар. схортханд изписване, с което можем да подадем тези стойности по по-кратък начин:

.item-a {
    grid-column: 4 / span 3;
    grid-row: third-line / 4;
}

justify-self

Ако пък искаме да подравним съдържанието на дадена клетка по хоризонтала, то ще използваме свойството justify-self:

.item-b {
    justify-self: start | end | center | stretch;
}

align-self

Както вече се досещаш, за да подравним съдържанието на дадена клетка по вертикала, ще го направим с align-self:

.item-c {
    align-self: start | end | center | stretch;
}

Responsive CSS grid

Ако си внимавал/а, няколко реда по-нагоре ти обещах, че ще ти споделя как можеш да постигнеш напълно флуиден и адаптивен grid при това без употребата на media query-та. Да разгледаме следния snippet:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Магията тук идва от функцията repeat() и нейните параметри – autofit и minmax. Какво означава това на български език? С repeat() казваме да повтаряме толкова колони, колкото се събират на този ред, до момента, до който една колона не може да се събере, понеже е 250px широка (при по-малки екрани ще заема 100% от пространството).

Тук съм ти приготвила много подробен пример, придружен от CodePen демо.

Кога да изполваме grid и кога – flex

Често по време на обученията, които провеждам получавам въпрос „кога да използвам grid и кога flex„?

Отговорът, който предпочитам и давам е: използваме display: flex; за layout, който е по-прост – например header, в който имаме лого вляво и навигационно меню в дясно. Или пък – контейнер, чиято лява страна се състои от изображение, а дясната – текст.

Използваме display: grid; тогава, когато имаме по-комплексен layout и клетки, които се различават една от друга (такива, които заемат повече от един ред или повече от една колона).

А ако искаш и ти да научиш как да създаваш уеб страници, то имам новина за теб – вече може да достъпиш всички ресурси от най-популярната работилница на {dev} blondie; – Основи на HTML5 и CSS3. Вземи 4 часа видео и всички ресурси плюс допълнителна информация.