Как да овладеем ефективно CSS Grid в един Jiffy

Как да овладеем ефективно CSS Grid - в Jiffy

Научете необходимите 20% за 80% ефективност с CSS Grid.

Въведение

Това НЕ е статията, за да научите "всичко" за css решетката.

Напротив, целевата аудитория са хора, които искат бързо резултати и са продуктивни, докато са в нея.

В четирите части на тази статия ще ви покажа 20%, от които се нуждаете за 80% ефективност с оформлението на CSS Grid.

Нека копаем!

Защо само 20%?

Където е възможно, програмист търси ефективност - предполагаемият мързелив изход.

CSS Grid оформлението е сложно. Според мен по-сложен от Flexbox. (Мен, отнеха ми седмици, за да разбера flexbox)
Не така, защото е "трудно", но CSS Grid има 18 нови свойства плюс други концепции, за които никога не сте чували никъде другаде в CSS.

И така, имате ли нужда от всички тези нови имоти сега? Точно сега?

Не, не го правиш!

Просто научете малко, за да получите резултати сега. Можете да продължите да научите другите свойства по-късно. Това е моята дефиниция за „ефективност с оформлението на CSS Grid“

1. Какво е CSS Grid Layout?

Ако сте нови в оформлението в CSS, оформлението на CSS Grid може да ви се стори странно.

Чували ли сте за Flexbox?

Обичам да гледам оформлението на CSS Grid като по-стар брат (или родител) на Flexbox.

Работата с оформленията в CSS е била трудна и глупава. Flexbox донесе малко свеж въздух - но CSS Grid е още по-добър.

Какво ще изградим

Ще се научите да прилагате своите 20% знания за изграждането на клонинг на адаптивно оформление на музикално приложение.

адаптивно музикално приложение, кати музика

Част 1: 10%, които трябва да знаете - основни терминологии

Нека разгледаме първите неща, които абсолютно трябва да знаете.

Какво е контейнер за мрежа?

Всеки уебсайт или оформление на приложение, което правите (или сте виждали) по същество са кутии, поставени в определени определени граници.

gif от chris bannister

С много прости думи, решетката е само "линии". Хоризонтални и вертикални линии, които определят поставянето на други елементи на дизайна.

Ще се запознаете с това, ако използвате дизайнерски софтуер, като Adobe Photoshop или скица.

В контекста на CSS Grid оформлението, A Grid контейнер е родителят, който съдържа всички елементи в мрежата. Контейнерът Grid определя първоначалното поставяне на линиите на мрежата, както вертикални, така и хоризонтални.

Какво е Grid Line?

Да приемем за малко, че имате напълно разположена мрежа като тази:

предполагаемо оформление на решетката

Оформлението включва контейнер с решетка с редица перфектно разположени мрежови елементи (детски елементи в мрежата)

малко обяснение

Линиите на мрежата са хоризонталните и вертикалните линии, които разделят мрежата.

Какво е Grid Cell?

Grid клетка е най-малката единица от площта в мрежовата подредба. Това е всяко пространство, ограничено от четири линии на мрежата.

„Малките кутии“ на мрежовите елементи могат да бъдат наричани решетъчни клетки.

Зона на решетката

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

На изображението по-долу областта, покрита от четирите клетки, е област на решетката.

Какво е Grid Track

Не харесвам много технически определения. Така че, решетката може да се разглежда като фантастично име за колони и (или) редове. Това е пространството между всяка две линии на мрежата.

Изображението по-долу показва примерни коловози.

решетки песни

Така че, ние сме подредили първата част.

Част 2: „Другите“ 10%, които трябва да знаете - CSS Grid, Baby стъпки.

Сега, когато разбирате основните терминологии, като приключенско дете, нека да ритаме!

Как да дефинирате мрежа?

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

Например, за да направите определен div контейнер за мрежа, направете това:

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

Как създавате колони и редове?

Решетка без колони и редове е някак безсмислена. За да създадете колони и редове в контейнер с мрежа, използвате тези две нови css свойства: grid-template-колони и grid-template-rows.

И така, как ги използвате? Доста проста.

grid-template-column определя разположението на колоните. grid-template-rows дефинира разположението на редовете.

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

Вижте пример:

решетка-шаблон-колони: 100px 200px 300px

Това ще създаде 3 нови колони в контейнера на мрежата. Първият с дължина 100px, другият - 200px, а последният - 300px.

решетка-шаблон-колони: 100px 200px 300px

решетка-шаблон-редове: 100px 200px 300px

Това ще създаде 3 нови реда в контейнера на мрежата. Разширенията са показани по-долу

решетка-шаблон-редове: 100px 200px 300px

Сега ги съберете и получавате пълна решетка - с редове и колона.

решетка-шаблон-колони: 100px 200px 300px
решетка-шаблон-редове: 100px 200px 300px

Част 3: Време за код - CSS Grid, Hands-on

Сега нека вземем бебешки стъпки, за да изградим клонинг на известното музикално приложение, котешка музика music

За бързо развитие бих използвал Codepen. Завъртете нов проект и нека да напукаме.

Как да създадете основна настройка на мрежата за Catty Music

Вярвам, че вече имате стартиран основен проект за codepen.

Ще започнем с много основен html документ.

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

Има малко предвидливост при избора на тази структура. Ще разберете много скоро

Сега стилизирайте документа.

тяло {
   дисплей: решетка;
   мин. височина: 100%
}

Това ще стартира контекста за форматиране на мрежата, като тялото направи контейнер за решетка

Сега можем да продължим да дефинираме структурата на редовете и колоните в рамките на мрежата.

Как да създадете редове и колони за Catty Music

Създаването на редове и колони е доста лесно.

Крайният дизайн, за който стартираме, е следният:

окончателното оформление, което търсим.

Въпреки това, първоначалната настройка на мрежата, от която се нуждаем, е мрежа от 2 реда и 2 колони.

първоначална настройка на мрежата

Ето няколко неща, които трябва да отбележите за тази настройка на Grid

колони:

  1. Първата колона трябва да има фиксирана ширина - да речем, 50px
  2. Втората колона трябва да запълни останалата ширина в мрежата.

редове:

3. Вторият ред трябва да има фиксирана височина - да речем, 100px

4. Първият ред също трябва да запълни останалата височина в мрежата.

Решението на непрофесионалния човек.

Ако НЕ сте много опитни с CSS, вероятно ще напишете това:

тяло {
   ...
   решетка-шаблон-редове: 100% 100px;
   решетка-шаблон-колони: 50px 100%;
}

Проблемът с това е, че случайно сте създали решетка, чиято ширина и височина е общо 100% + 50px / 100% + 100px

Искаме обща ширина и височина от точно 100%, така че този подход е грешен.

Решението на „интелигентния човек“

Ако имате опит с CSS под колана си, вероятно е да направите нещо много по-интелигентно. Като този:

тяло {
   ...
   решетка-шаблон-редове: calc (100% - 100px) 100px;
   решетка-шаблон-колони: 50px изчисление (100% -50px)

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

Например, ако по някакви причини трябва да промените някоя от фиксираните ширини, винаги трябва да променяте дефиницията на calc.

Ефективното решение

За щастие, CSS Grid разполага с ново устройство, което решава елегантно нашия проблем. Дробната единица (fr)

Фракционната единица решава проблема с автоматично разпределение на пространството.

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

Ако по някаква причина добавите още елементи - без притеснения. Fr единицата ще преразпределя еднакво пространството.

И накрая, ако имате елемент с фиксирана ширина, тогава можете да заемете останалото пространство с fr единицата.

Ето какво имам предвид:

тяло {
   ...
   решетка-шаблон-редове: 1fr 100px;
   решетка-шаблон-колони: 50px 1fr;

И това е - направено!

Ако все още сте объркани с fr единица, моля, проверете, CSS Fractional Unit (Fr) на достъпен, обикновен език. Това отнема само 3 минути.

Именуване и позициониране на елементи по райони на мрежата

Изрично създадохме мрежовата система. Сега, нека го използваме

Целта на този раздел е да се научите да позиционирате елементите на мрежата, като използвате мрежовите области.

Ако си спомняте от по-ранен раздел, мрежа на мрежа е всяка област, ограничена от 4 линии на мрежата.

„Малките кутии“ на мрежовите елементи могат да бъдат наричани решетъчни клетки.

Как да започнете да използвате областите на мрежата?

Логичното място за начало е да назовем райони на решетката.

Нека ви обясня това.

Помислете кодовия блок по-долу:

3 divs - прости. Между другото, семантично е по-добре да се използват отстрани основните и долните маркери. Просто ще опростя нещата.

Сега вижте това:

.main {
  grid-area: съдържание;
}
.footer {
  площ на решетката: долен колонтитул;
}
.настрана {
  площ на решетката: странична лента;
}

Какво се случва там?

Ако напишете малко Javascript или който и да е език за програмиране, понятията на променливите не са ви нови.

В Javascript можем да кажем:

var gridArea = "съдържание"

Това, което се прави по-горе, е да запишете съдържанието на низ в променливата gridArea

Това, което прави CSS декларациите по-горе, е доста подобно.

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

Всеки елемент на мрежата може да бъде присвоен на област в контейнера на мрежата

Въпреки това, преди да направите това, е задължително да прикачите елементите на мрежата към име на област. Като присвояване на променливи в Javascript - нещо като.

.main {
  grid-area: съдържание;
}
.footer {
  площ на решетката: долен колонтитул;
}
.настрана {
  площ на решетката: странична лента;
}

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

Сега на елементите на мрежата са назначени имена на области.

В програмирането променливите са зададени да се използват другаде. Сега нека се възползваме от имената на мрежата на мрежата.

Поставяне на решетъчната площ

Млад мъж има добре изпечена торта. Той има 3 деца с молба да им даде някои порции. В идеалния случай кой споделя тортата?

Младият мъж!

Младият мъж изрязва районите и ги дава на децата си.

вкусен!

Ето защо разказах тази сладка история.

Подобно на тортата, цялата площ на решетката е собственост на кого?

Контейнерът на решетката!

Подобно на младия мъж, контейнерът за решетка също има 3 деца.

Още нещо.

Тъй като всички деца имат имена, младият мъж може да каже: „ей Брайън, ето твоята порция“ или „ей Ема, имай това“

Лесно е да се идентифицира кой е собственик на коя част от тортата, като присвоите порциите на определен човек. Нямам лек за вас, ако живеете в страна, в която хората отиват без имена

Всички елементи на мрежата имат имена! Направихме това, използвайки свойството на мрежовата зона.

Сега, нека да споделим тортата!

Свойството на мрежата-шаблон-области

Сега контейнерът за решетка трябва да споделя "тортата". Задайте коя част от зоната отива на кого.

Има много начини да направя това, което искам да ви обясня, но свойството grid-template-areas е най-лесното. Това е малкото, което трябва да знаете за ефективност.

Как работи свойството на мрежата-шаблон-области?

Разгледайте кода по-долу:

тяло {
      grid-template-области: "съдържание на страничната лента"
                           "долен колонтитул";
  }

какво по дяволите е това?

Това, скъпа моя, е свойството grid-template-области в действие. Няма нужда да се прекалявате. В този раздел ще обясня как работи - по ясен начин.

Свойството на мрежата-шаблон-области (което е дълго име на свойството) осигурява много визуална структура на мрежата.

Погледнете кода отново:

тяло {
      ...
      grid-template-области: "съдържание на страничната лента"
                           "долен колонтитул";
  }

Обърнете внимание, че записите в стойността на свойството са имената на елементите на мрежата!

Съдържанието на страничната лента и долният колонтитул се отнасят до имената на елементите на мрежата. Декларацията по-горе сподели успешно зоната по отношение на имената на елементите на мрежата - блестящо!

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

Подножието заема цялата долна област. Страничната лента и съдържанието заемат съответно първата и втората горна област.

Страхотно!

На този етап ето какво имаме:

тяло {
      дисплей: решетка;
      решетка-шаблон-колони: 40px 1fr;
      решетка-шаблон-редове: 1fr 90px;
      grid-template-области: "съдържание на страничната лента"
                           "долен колонтитул";
  }

Резултатът от това е следният:

СТЪПКА 1: https://codepen.io/ohansemmanuel/pen/bRWrPE

Добавих цветове за визуална помощ. Червеният раздел представлява долния колонтитул, другите два раздела, .main секцията и .sidebar.

Нека бъдем отзивчиви - Предефиниране на Grid области с медийни заявки

gif от Muharrem Senyil

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

Изображението по-долу показва какво целим да постигнем на мобилни дисплеи.

Catty Music, на мобилен телефон

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

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

Ощипнете текущия код, който имате сега. Увийте определящия бит на мрежата в заявка за медия.

Като този:

само @media екран и (минимална ширина: 600 px) {
    тяло {
        решетка-шаблон-колони: 120px 1fr;
        grid-template-области: "съдържание на страничната лента"
                             "долен колонтитул";
         }
}

Трябва да оставите по подразбиране изключени от медийната заявка

тяло {
    дисплей: решетка;
    решетка-шаблон-редове: 1fr 50px;
}

Защо имам редове-шаблон-решетка: 1fr 50px изключени от медийната заявка?

Това е така, защото и мобилните, и настолните екрани ще имат една и съща дефиниция на редове. 2 реда.

На настолни устройства обаче има странична лента. Страничната лента отчита 120px в дефиницията на колоните за решетка-шаблон. Въпреки това, страничната лента не съществува на мобилни устройства.

По този начин ще предефинираме декларацията за решетка-шаблон-колона за мобилни устройства.

Сега за мобилните устройства ние ще оставим това като стил по подразбиране. т.е. не е обвит в никаква медийна заявка.

тяло {
   grid-template-области: "съдържание"
                        "Долния"

Доста просто?

Нека обясня.

Поток по подразбиране (посока) на Grid

Кодовият блок за мобилни дисплеи е лесен.

тяло {
   grid-template-области: "съдържание"
                        "Долния"

Имайте предвид обаче, че не е необходимо да се определят колони-шаблон-решетка

По подразбиране решетка ще подравнява децата си по редове.

И така, декларацията по-горе ще подравнява съдържанието по ред, а долното и в друго.

По-долу е резултатът от това - страничната лента, скрита на мобилния телефон.

СТЪПКА 2: https://codepen.io/ohansemmanuel/pen/qjVvjJ?editors=1100

С първоначалното препятствие да разберете как работят мрежите и да настроите отзивчива мрежа, нека завършим оформлението на приложението!

Поставяне на съдържание в мрежата.

В края на този раздел ще завършим оформлението на приложението Музика. Фокусът е, как да поставите и подравните съдържанието в мрежите.

Да започваме.

1. Страничната лента

Това изглежда като най-лесното за начало. Нека да го направим

Страничната лента се състои от 8 икони, еднакво разположени вертикално по цялата дължина на страничната лента.

Поставете иконите по този начин:

                                                       

По-долу е резултатът от това:

https://codepen.io/ohansemmanuel/pen/BZmbza

Освен това скрийте иконите, когато сте на мобилен телефон. Показвайте ги, когато приложението е посетено на по-голям екран. Това е първият мобилен подход.

.aside i {
  дисплей: няма;
}
само @media екран и (минимална ширина: 600 px) {
  .aside i {
    дисплей: блок;
  }
}

Иконите се показват, но не са добре подравнени.

Подравняване на иконите

I таговете са вградени елементи - което обяснява защо всеки 2 икони седят на един ред.

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

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

Стъпка 1: Направете страничната лента контейнер за мрежа

Това ще даде достъп до използването на функциите за подравняване на мрежата.

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

само @media екран и (минимална ширина: 600 px) {

  .настрана {
     дисплей: решетка;
  }
  
  .aside i {
    рамка: 1px плътно червено;
  }
}

Продължих да добавям рамки към всяка икона - така че те да се различават визуално.

Какво се случва там?

НЕ сме задали редове или колони в страничната лента. Но имаме иконите, изложени доста добре. Алгоритъмът за автоматично разположение на мрежата е зададен.

Това е свързано с поставянето на елементи по подразбиране в мрежа - по ред. Също така елементите на мрежата са подредени така, че да заемат пространството на контейнера на мрежата, ако е необходимо.

Тук идва сладкият сос.

Една мрежа може да подравни елементите й, като използва някой от оправдателните елементи или елементите за подравняване.

justify-items ще подравнят елементите по оста на реда. В повечето случаи редът е почти синоним на хоризонталната посока.

align-items ще подравнят елементите по оста на колоната. В повечето случаи колоната също е синоним на вертикалната посока.

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

.настрана {
     ...
     justify-items: център;
     подравняване-елементи: център;
  }

Все още объркан, наблюдавайте промените в елементите на страничната лента, докато пишем.

Сега имаме перфектно разположени икони в страничната лента.

https://codepen.io/ohansemmanuel/pen/MorYJq?editors=1100

Няколко други стойности за оправдателни елементи и елементи за подравняване могат да вземат включват:

  • опъвам, разтягам
  • начало
  • край
  • център

Ако сте работили с Flexbox, те трябва да са запознати.

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

Насочете главния раздел, тъмносиния участък на изображението по-горе. Поставете два div в рамките на:

  
  

NB:

  1. main__header ще приюти музикалното изкуство и възпроизвеждането:
.main__header

2. main__body ще съхранява детайлите:

.основно тяло

В този раздел ще се съсредоточим върху main__header

Първо, добавете необходимия html

      
                        
          
              

CattyBoard Топ 100 единични класации (11.06.36)

              

Неизвестен изпълнител

              

2016. Графики. 100 песни

                     
                & nbsp; Възпроизвеждане на всички                 & nbsp; Добавяне към                 & nbsp; & nbsp; Още                  

Обърнете внимание на начина на структуриране на документа.

main__header има две директни деца. Раздел, който съдържа изображение и раздел, съдържащ подробности за албума, .details

Резултатът от добавянето по-горе е това доста грозно изображение:

непълна заглавка

Нека направим това хубаво

Това, от което се нуждаем, е мрежа, която подравнява децата си по подходящ начин.

Нека се възползваме от новите си познания за областите на мрежата.

Първата стъпка дефинирайте зоните на мрежата:

.main__header> .img {
  grid-area: img;
}
.main__header> .details {
  площ на решетката: dtls;
}

Разделителят, съдържащ изображението, е кръстен img Разделът, съдържащ детайлите на албума, е наречен dtls

Сега определете самата мрежа:

.main__header {
  дисплей: решетка;
  grid-template-области: "img"
                       "DTLS";
}

.main__header задава контекст за форматиране на мрежата. Площите също са подравнени, за да се подреждат вертикално върху друга. imgfirst, после dtls

Това е така, защото работим с мобилен първи подход. Добре.

В този момент нищо много не се промени.

Включих граници и направих текста белезникав за визуална помощ.

Това НЕ е изгледът, който искаме на мобилни устройства.

За мобилните екрани елементите трябва да бъдат подравнени към центъра. Поправете това.

@media екран и (макс. ширина: 600 px) {
  .main__header {
    justify-items: център;
  }
}

Сега елементите на мрежата ще бъдат разположени в центъра на мрежата (по реда)

Направете текстовете в .detail, подравнете към центъра:

@media екран и (макс. ширина: 600 px) {
  .main__header> .details {
    подравняване на текст: център;
  }
}

Доста близо до крайната цел. Само още няколко ощипвания.

Параграфите с текстовете, неизвестен изпълнител и 2016г. Диаграми. 100 песни. трябва да бъдат скрити на мобилни устройства. Изображението също трябва да е по-малко.

@media екран и (макс. ширина: 600 px) {
  .sm - скрий {
    дисплей: няма;
  }
  .img> img {
    ширина: 150px
  }
}

Всеки .sm - скрий клас ще бъде скрит на мобилни устройства. Просто добавете този клас към желания елемент.

Ето как:

Неизвестен изпълнител

2016. Графики. 100 песни

И ние имаме това:

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

Обратно към родителската мрежа.

За по-големи екрани се нуждаем от 2 колонна решетка. Зоните трябва да бъдат разделени така:

само @media екран и (минимална ширина: 600 px) {
   .main__header {
    решетка-шаблон-колони: 250px 1fr;
    grid-template-области: "img dtls"
  }
}

Сигурен съм, че разбираш какво става там.

Решетката е предефинирана, за да има две колони. Единият е фиксиран на 250px, а другият за запълване на оставащото пространство.

https://codepen.io/ohansemmanuel/pen/gReOQJ?editors=1100

Нашият настоящ прогрес живее тук.

Част 4: Да накараме CSS Grid да работи с Flexbox

В тази част ще се научите да накарате Flexbox и Grid да работят заедно - спокойно.

Тези две технологии промениха начина на третиране на оформлението в CSS. Използвайте и двете технологии, когато е възможно.

Нека задълбаем.

За секцията, съдържаща подробности за музиката, ще използваме flexbox.

Как да разберете къде да използвате Flexbox?

Като общо правило, е подходящо да се използва Grid за оформление на цялостното оформление на страницата и Flexbox за вътрешни компоненти на потребителския интерфейс.

Елементът от решетка може да бъде гъвкав контейнер. Гъвкав елемент може също да бъде контейнер с решетка. Последният обаче често се използва.

Предполагам, че добре разбирате флексбокса.

Както винаги, започнете с html

По-долу е даден div, със списък на песните. Списъкът с песни има абзаци, съдържащи името на песента, изпълнител, продължителността на песента и „котешка синхронизация на облака“.

        
              

1. Един танц

              

Crake feat CatKid & amp; Cyla               

02:54               

CATTY CLOUD SYNC

                 
              

2. Panda               

Cattee               

04:06               

CATTY CLOUD SYNC

                 
              

3. Не може да спре усещането!

              

Catin Cimberlake

              

03:56               

CATTY CLOUD SYNC

                   
              

4. Работете от дома

              

Cat Harmony feat Colla

              

03:34               

CATTY CLOUD SYNC

              

Ето какво имаме:

main__body е елемент от мрежата. Бихме могли да го направим гъвкав контейнер, ако това беше полезно.

За нашия случай, всяко директно дете дете на main__body трябва да бъде flex контейнер. Това е divthat съдържа името на песента, артист, продължителността на песента и „catty cloud sync“.

.main__body> div {
  дисплей: шнур;
}

Сега разделете ширината между дъщерните елементи:

.main__body> div p {
  гъвкавост: 0 0 25%;
}
https://codepen.io/ohansemmanuel/full/pwLEBL/

Ще се съгласите с мен, че в този момент основните неща на оформлението са готови. Да,

Въпреки това, аз продължих да направя няколко козметични промени.

Можете да видите резултата от това тук

Ще забележите, че съм оставил долния колонтитул. Това трябва да е упражнение за вас. Моят съвет е да използвате flexbox. Това ще засили разбирането ви за получаване на двете технологии да работят заедно. Вървете напред и направете решетката, подплатете гъвкав контейнер.

Ако се нуждаете от някои сигнали, разгледайте котка музика, изградена изцяло с флексбокс.

Само с няколко свойства на решетката сте изградили реално оформление на света. Това е доста впечатляващо Освен това сте научили безценното умение да накарате CSS Grid оформлението да работи и с Flexbox.

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

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

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

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