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

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

Как ви помага? За разлика от традиционните методи за оформление, които ви позволяват да позиционирате елементи само в редове или колони, CSS мрежата ви предлага най-доброто от двата свята – 2D подход, използващ редове и колони.

Мрежови контейнери и елементи

Можете да приложите свойствата на CSS мрежата към два основни типа елементи: родител и деца. Когато зададете свойството display на "grid" за родителски елемент, той трансформира този елемент в мрежов контейнер. Всеки дъщерен елемент в този контейнер на мрежата става елемент на мрежата, наследявайки приложените свойства на мрежата.

Ето как е представен:

Мрежовият елемент може също да се превърне в мрежов контейнер. Вече можете да наричате оформлението като вложена решетка – решетка в мрежата. Контейнерът на основната решетка сега се нарича външна решетка, докато контейнерът, превърнат в решетка, става вътрешна решетка.

instagram viewer

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

Ето как изглежда:

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

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

Мрежови линии и следи

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

  1. Линии на мрежата: Линиите на мрежата се отнасят за хоризонталните и вертикалните линии, които образуват мрежата в CSS оформлението на мрежата. Те определят началните и крайните точки на редове и колони, като помагат да се организира къде отиват нещата в мрежата. Тези линии са като ръбове на кутии; те имат числа, които ви помагат да посочите елементите при позициониране. Тук червената пунктирана линия ги представлява:
  2. Мрежови следи: Това са празнините между линиите на мрежата, които определят редове и колони. Те са като градивните елементи на мрежовото оформление. В изображението по-горе цветната област във всеки елемент представлява релсовата мрежа.

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

Свойства на CSS Grid Container

Това са свойства, които можете да приложите към мрежовия контейнер, за да организирате оформлението и да подпомогнете позиционирането на елементи в него. Както споменахме по-рано, едно от тях е свойството display, зададено на grid. Ето още:

Шаблон за мрежа

Това свойство определя размера на редовете и колоните. Можете да оразмерите тези свойства с помощта на пиксели, проценти или дробна единица (fr). Освен това можете да използвате ключови думи като Автоматичен, minmax(), и повторение() за подобряване на гъвкавостта.

  • grid-template-rows: Задава височини на редове.
  • grid-template-colons: Определя ширините на колоните.

Ето няколко примера:

Използване на пиксели:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

Използване на проценти:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

Използвайки fr:

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

Използване на ключови думи auto и minmax().:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

Използване на repeat() за последователно оразмеряване:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

Области за автоматично разположение и шаблони на мрежата

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

Области на шаблона на мрежата: Мислете за областите на шаблона на мрежата като за създаване на оформление, използващо именувани зони. Това е като именуване на стаи на етажен план. Можете да се позовавате на тези имена на области, когато позиционирате елементи от мрежата. Например:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Това оформление е като решетка с три колони и четири реда. Има два реда за областта с основно съдържание. Означените области включват "заглавка", "странична лента", "съдържание" и "долен колонтитул". В следващите раздели ще научите как да използвате тези етикети на области в свойствата на всеки елемент от мрежата.

Подравняване в CSS Grid

Можете да използвате свойствата за подравняване, за да контролирате позиционирането на елементи от мрежата в техните клетки от мрежа. Имотите са:

  • justify-items: Управлява хоризонталното подравняване на елементите в клетката на мрежата им.
    • Стойности: начало, край, център и разтягане.
  • подравняване на елементи: Управлява вертикалното подравняване на елементите в клетката на мрежата им.
    • Стойности: начало, край, център и разтягане.
  • justify-content: Подравнява цялата решетка в контейнера по хоризонталната ос.
    • Стойности: начало, край, център, разтягане, интервал между, интервал наоколо и интервал равномерно.
  • подравняване на съдържание: Подравнява цялата мрежа в контейнера по вертикалната ос.
    • Стойности: начало, край, център, разтягане, интервал между, интервал наоколо и интервал равномерно.

Ето един пример:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

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

Пролука в мрежата

Разликата в мрежата се отнася до пространството между редовете и колоните в оформлението на мрежата. Помага за създаване на визуално разделяне и добавя малко място между елементите на мрежата.

The решетка-пролука свойството ви позволява да зададете празнината между редове и колони. Можете да използвате различни единици, за да го дефинирате, като пиксели (px), проценти (%), em единици (em) и други.

.grid-container {
grid-gap: 20px;
}

В този пример мрежовият контейнер има две колони с разстояние от 20 пиксела между тях. Това разстояние визуално разделя колоните и подобрява оформлението.

Свойства на CSS Grid Item

Ето някои ключови свойства, които контролират поведението на отделни елементи от мрежата в CSS оформлението на мрежата, заедно с примери:

grid-row-start и grid-row-end:

  • Определя началните и крайните редове за даден елемент.
  • Стойностите могат да бъдат номера на редове, "span n" или "auto". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Този код места Елемент 1 от мрежата от линията на втория ред до линията на четвъртия ред.

начало на мрежата-колона и край на мрежата-колона:

  • Определя началните и крайните редове на колони за даден елемент.
  • Стойностите могат да бъдат номера на редове, "span n" или "auto". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Този код места Елемент 2 от мрежата от първия ред на колона до реда на третата колона.

мрежова област:

  • Указва размера и позицията на елемент от мрежата в мрежата чрез препратка към именуваните линии на мрежата в grid-template-areas.
  • Както бе споменато по-рано, предварително дефинирани имена на области вече се използват с grid-template-areas Имот. Ето пример как да го използвате заедно с мрежова област. 
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

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

оправдавам се:

  • Подравнява отделни елементи хоризонтално в своята клетка.
  • Стойностите могат да бъдат начало, край, център и разтягане. 
.grid-item-5 {
justify-self: center;
}

Този код хоризонтално центрира Елемент 5 от мрежата в клетката си.

самоподравняване:

  • Подравнете отделните елементи вертикално в клетката.
  • Стойностите могат да бъдат начало, край, център и разтягане. 
.grid-item-1 {
align-self: end;
}

Този код се подравнява Елемент 1 от мрежата до дъното на клетката си.

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

Създаване на адаптивни оформления с помощта на CSS решетки

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

  • Медийни заявки: Можете да използвате медийни заявки за прилагане на различни оформления на мрежата в зависимост от размерите на екрана. Например, може да се наложи да пренаредите елементите на мрежата или да коригирате ширината на колоните за по-малки екрани.
  • Гъвкави единици: Използвайте относителни единици като проценти и fr, за да позволите на елементите от мрежата и колоните да се коригират пропорционално на наличното пространство.
  • minmax(): Използвай minmax() функция за указване на диапазон от размери за колони или редове на мрежата. Той гарантира, че елементите няма да изглеждат твърде малки или твърде големи на различни екрани.

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

Разгледайте възможностите на CSS Grid Layout

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

Докато се задълбочавате в системите за оформление, може да искате да сравните други методи за оформление с CSS мрежи. Можете да направите това с модула CSS Flexbox. Това ще ви помогне да се научите да решавате, когато работите по проект.