Как да започнем с CSS Grid Layout

Какво ще научите:

  1. Как да получите браузър, поддържан от CSS Grid
  2. Как да започнем от контекста на Grid за форматиране
  3. Разберете основите на Grid Rows and Column
  4. Погледнете първо новата фракционна единица (fr)
  5. Работете по пътя си чрез вложени мрежи

Аха! Да започваме.

Ако не знаете какво е CSS Grid, накратко, това е сравнително нов стандарт за изработка на оформления на страници в CSS.

Стъпка # 1: Вземете поддържан CSS Grid браузър

По време на това писане поддръжката на браузъра за CSS Grids не е особено страхотна. Това обаче не ви спира да го изпробвате днес.

Поддръжка на браузъра от канюза

ДЕЙСТВИЕ: Актуализирайте браузъра си Chrome, Firefox, Safari или Opera или просто изтеглете най-новия Firefox или Chrome

Стъпка # 2: Познайте основите на устройството на мрежата

Както при всичко в живота, познаването на основите ще ви спести много главоболия.

ДЕЙСТВИЕ: Прочетете и кодирайте заедно

Помислете за маркирането по-долу:

<Тяло>
  <Настрана> 
  <Основната> 

Просто оформление на страницата. Нищо сложно - все пак.

За визуална помощ и понеже никой не обича грозни примери, придайте на елемента на тялото някакъв цвят:

тяло {
  цвят на фона: rgba (26,188,156, 1);
}

Ето резултата от това:

Считам, че не сте стигнали толкова далеч, за да правите големи зелени екрани - така, нека да подправим нещата.

Добавете малко съдържание както настрани, така и на основното

<Тяло>
  <Настрана>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  
  <Основната>
    

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.     

Interdum varius sit amet mattis. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Mattis aliquam faucibus purus in massa tempor nec feugiat. Neque egestas congue quisque egestas diam in arcu cursus.

    

Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Quam id leo in vitae turpis. Blandit libero volutpat sed cras. Tellus at urna condimentum mattis pellentesque. Mollis nunc sed id semper. Volutpat commodo sed egestas egestas fringilla fallus faucibus. Commodo odio aenean sed adipiscing diam donec adipiscing. Faucibus et molestie ac feugiat sed. Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet.

Auctor eu augue ut lectus arcu bibendum at varius. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Augue interdum velit euismod in. Arcu felis bibendum ut tristique. Ullamcorper a lacus vestibulum sed arcu. Maecenas sed enim ut sem. Eu turpis egestas pretium aenean pharetra. Condimentum lacinia quis vel eros donec ac.

  

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

Придайте на двете области на съдържание някакъв стил:

настрана,
главен {
  цвят на фона: #fff;
  подплънки: 10px;
}

И ето резултатът от това:

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

Основи # 1: Стартиране на контекста на Grid за форматиране

Подобно на Flexbox, използването на Grid оформлението започва с настройка на контейнер с решетка. Забравете езика, по-лесно е, отколкото си мислите.

тяло {
  дисплей: решетка;
}

Елементът на тялото е елементът на контейнера - къщи както отстрани, така и основни

Настройка на дисплея: решетката на елемента на тялото изглежда не е задействала промени.

Основи №2: Редове и колони на решетката

Решетката в най-основната й форма съдържа редове и колони. За да получите каквито и да било разумни ползи от оформлението на Grid, трябва да определите как ще бъдат разположени редовете или колоните.

Нека отстрани и основният раздел да се покажат един до друг. По същество, двуколонна решетка.

тяло {
  решетка-шаблон-колони: 20% 80%;
}
Основно оформление на 2 колони

grid-template-column е свойство на мрежа. Не очаквам да разберете какво прави.

grid-template-column определя как се полагат колоните в рамките на мрежата. Колко широки трябва да бъдат или в какви пропорции трябва да бъдат положени. В този пример първата колона е дефинирана да има ширина 20%, а другата - 80%.

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

тяло {
  решетка-колона-празнина: 15px;
}
Лесно поправяне - без нужда от маржове

grid-column-gap също е ново свойство - такова, което може би не сте виждали досега. Той определя разстоянието (или пролуките) между колоните.

Ако сте обърнали голямо внимание, сигурно сте забелязали нещо странно.

Настрана се дава ширина 20% и основна, 80%. Сумата от това е 100%. Пропастта на решетката-колона също има ширина 15px - това е допълнително 15px. Общата ширина на оформлението сега надвишава 100% (20% + 80% + 15 px). Това създава странно разстояние и хоризонтална лента за превъртане, за да видите допълнителните 15px съдържание.

Нека да поправим това.

Основи # 3: Дробната единица

Фракционната единица fr е нова за CSS. За разлика от други мерни единици в CSS, той играе значителна роля за създаването на разумни схеми на мрежата.

Проблемът, обсъден в „основи №2“ по-горе, може лесно да бъде решен с помощта на фракционната единица.

тяло {
  решетка-шаблон-колони: 1fr 4fr;
  решетка-колона-празнина: 15px;
}

Вместо да използвам ширини от 20% и 80%, съм заменил тези съответно с 1fr и 4fr.

И така, какво се случва тук?

Пропастта на решетката-колона е присвоена ширина 15px. Останалото налично пространство в контейнера се разделя в пропорции 1: 4, благодарение на фракционната единица (fr). 1fr и 4fr съответно.

Ако това е объркващо, това е нормално. Вземете дълбока широчина, прочетете отново Основи №3 и ще получите по-добро усещане за това как работи.

Основи # 4: Вложени мрежи

Мрежите също могат да бъдат вложени.

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

<Основната>
    

    

    

    

  

Направете основен контейнер за решетка също.

главен {
  дисплей: решетка;
}

Достатъчно просто.

Сега дефинирайте разположението на редовете и колоните. Какво ще кажете за 2 колони?

главен {
  решетка-шаблон-колони: 1fr 1fr;
  решетка-решетка: 20px;
}

Кодът по-горе създава две колони с равни размери и празнина 20px.

Забележете, че декларацията казва, че мрежата-празнина НЕ решетка-колона-пропаст или решетка-ред-пропаст. grid-gap създава пропуски както в редовете, така и в колоните.

Вложени мрежи

Между другото, има 10px подплънки както за странични, така и за основни елементи.

Можете също така да определите размерите на редовете:

главен {
  решетка-шаблон-редове: 100px 150px;
}
Първи ред: 100px и втори ред: 150px

Първият ред е определен с височина 100px, а вторият - 150px. Като напомняне редовете вървят отляво надясно, а колоните отгоре надолу - по подразбиране.

Надявам се, че не беше много да се предприеме наведнъж. Сега имате разбиране на основите!

Искате ли да станете професионалист?

Изтеглете безплатния ми CSS Grid чит лист, а също и безплатно получете два качествени интерактивни курса Flexbox!

Вземете безплатно CSS Grid Cheat sheet + Два качествени Flexbox курса безплатно!

Вземете ги сега