Научите како да користите ЦСС мреже за лако грађење сложених изгледа.

Позиционирање елемената на веб страници може бити веома компликовано када радите са сложеним изгледима. Овде ЦСС мрежа добро долази. То је систем распореда дизајниран да поједностави процес креирања сложених изгледа.

Како вам то помаже? За разлику од традиционалних метода распореда које вам омогућавају да позиционирате елементе само у редовима или колонама, ЦСС мрежа вам нуди најбоље од оба света — 2Д приступ који користи редове и колоне.

Мрежни контејнери и предмети

Својства ЦСС мреже можете применити на два главна типа елемената: родитељ и потомци. Када својство приказа поставите на "грид" за родитељски елемент, он трансформише тај елемент у контејнер мреже. Сваки подређени елемент унутар овог контејнера мреже постаје ставка мреже, наслеђујући примењена својства мреже.

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

Ставка мреже такође може постати мрежни контејнер. Сада можете да се односите на изглед као на угнежђену мрежу — мрежу унутар мреже. Контејнер главне мреже се сада назива спољном мрежом, док контејнер окренут са мрежом постаје унутрашња мрежа.

instagram viewer

Свака од ових мрежа функционише независно од друге, што значи да својства постављена за унутрашњу мрежу не утичу на изглед спољашње мреже, и обрнуто.

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

Савладавање односа између мрежних контејнера и ставки је од суштинског значаја за грађење дводимензионалних распореда ефективно.

Имајте на уму да постоје својства мреже за мрежне контејнере, док су друга за ставке мреже.

Мрежне линије и стазе

Пре него што почнете да користите ЦСС мрежу, постоје два кључна термина са којима би требало да будете упознати:

  1. Мрежне линије: Линије мреже се односе на хоризонталне и вертикалне линије које чине мрежу у ЦСС распореду мреже. Они одређују почетне и завршне тачке редова и колона, помажући да се организује где ствари иду на мрежи. Ове линије су као ивице кутија; имају бројеве који вам помажу да референцирате елементе приликом позиционирања. Овде их црвена испрекидана линија представља:
  2. Грид трацкс: То су празнине између линија мреже које дефинишу редове и колоне. Они су као градивни блокови распореда мреже. На горњој слици, обојена област унутар сваке ставке представља траку мреже.

Размислите о линијама мреже и траговима као о грађевним блоковима распореда мреже, попут линија на листу милиметарског папира. Када се хоризонтална линија мреже пресеца са вертикалном линијом мреже, она формира ћелију у облику кутије. Ове ћелије делују као контејнери у које можете поставити своје ставке мреже.

Својства ЦСС грид контејнера

Ово су својства која можете применити на мрежни контејнер да бисте организовали распоред и помогли у позиционирању елемената унутар њега. Као што је раније поменуто, једно од њих је својство приказа постављено на мрежу. Ево још:

Грид Темплате

Ово својство дефинише величину редова и колона. Можете одредити величину ових својстава користећи пикселе, проценте или фракциону јединицу (фр). Такође, можете користити кључне речи као што су ауто, минмак(), и понављање() за побољшање флексибилности.

  • грид-темплате-ровс: Подешава висину редова.
  • грид-темплате-колумнс: Дефинише ширину колона.

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

Коришћење пиксела:

.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%;
}

Користећи фр:

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

Коришћење кључних речи ауто и минмак().:

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

Коришћење репеат() за доследно одређивање величине:

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

Области аутоматског постављања и шаблона мреже

Ауто Плацемент: Аутоматско постављање је као да пустите мрежу да одлучи где ће ставити ставке. Ако не наведете тачне позиције, мрежа ће аутоматски поставити ставке редоследом којим се појављују у маркупу. Ово је корисно када имате много ставки и желите да равномерно испуњавају мрежу.

Подручја шаблона мреже: Замислите области шаблона мреже као креирање распореда користећи именоване зоне. То је као да именујете собе на тлоцрту. Можете се позвати на ове називе области када позиционирате ставке мреже. На пример:

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

Овај распоред је попут мреже са три колоне и четири реда. Постоје два реда за област главног садржаја. Означене области укључују „заглавље“, „бочну траку“, „садржај“ и „подножје“. У следећим одељцима ћете научити како да користите ове ознаке области у својствима сваке ставке мреже.

Поравнање у ЦСС мрежи

Можете да користите својства поравнања да контролишете позиционирање ставки мреже унутар њихових ћелија мреже. Својства су:

  • јустифи-итемс: Контролише хоризонтално поравнање ставки унутар њихове ћелије мреже.
    • Вредности: почетак, крај, центар и растезање.
  • алигн-итемс: Контролише вертикално поравнање ставки унутар њихове ћелије мреже.
    • Вредности: почетак, крај, центар и растезање.
  • оправдати-садржај: Поравнава целу мрежу унутар контејнера дуж хоризонталне осе.
    • Вредности: почетак, крај, центар, растезање, простор између, простор око и равномеран простор.
  • алигн-цонтент: Поравнава целу мрежу унутар контејнера дуж вертикалне осе.
    • Вредности: почетак, крај, центар, растезање, простор између, простор око и равномеран простор.

Ево примера:

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

У овом примеру, ставке ће се центрирати и хоризонтално и вертикално унутар својих ћелија. Простор ће бити равномерно распоређен између стубова целе мреже, а мрежа ће бити центрирана вертикално у контејнеру.

Грид Гап

Размак у мрежи се односи на простор између редова и колона у распореду мреже. Помаже у стварању визуелног раздвајања и додаје мало простора између ставки мреже.

Тхе грид-гап својство вам омогућава да подесите размак између редова и колона. Можете користити различите јединице да бисте га дефинисали, као што су пиксели (пк), проценти (%), ем јединице (ем) и још много тога.

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

У овом примеру, мрежни контејнер има две колоне са размаком од 20 пиксела између њих. Овај размак визуелно раздваја колоне и побољшава изглед.

Својства ставке ЦСС мреже

Ево неких кључних својстава која контролишу понашање појединачних ставки мреже унутар ЦСС распореда мреже, заједно са примерима:

мрежа-ред-почетак и мрежа-ред-крај:

  • Дефинише почетну и завршну линију за ставку.
  • Вредности могу бити бројеви редова, "спан н" или "ауто". 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Овај код места Ставка мреже 1 од линије другог реда до линије четвртог реда.

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

  • Дефинише почетну и завршну линију колоне за ставку.
  • Вредности могу бити бројеви редова, "спан н" или "ауто". 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Овај код места Ставка мреже 2 од првог реда колоне до трећег реда колоне.

грид-ареа:

  • Одређује величину и позицију мрежне ставке унутар мреже упућивањем на именоване линије мреже у грид-темплате-ареас.
  • Као што је раније поменуто, унапред дефинисана имена области се већ користе са грид-темплате-ареас имовина. Ево примера како да га користите заједно са грид-ареа. 
.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 до дна своје ћелије.

Слободно комбинујте и прилагодите ова својства да бисте креирали изглед и изглед који желите за сваку ставку мреже у вашој ЦСС мрежи.

Креирање респонзивних распореда помоћу ЦСС мрежа

Коришћење ЦСС мрежа за креирање респонзивних изгледа важно је да обезбедите да се ваша веб страница неприметно прилагођава различитим величинама екрана и уређајима. Можете применити ове методе:

  • Медиа Куериес: Можете користити медијске упите да примените различите распореде мреже у зависности од величине екрана. На пример, можда ћете морати да преуредите ставке мреже или прилагодите ширину колона за мање екране.
  • Флексибилне јединице: Користите релативне јединице као што су проценти и фр да бисте омогућили да се ставке мреже и колоне прилагођавају пропорционално доступном простору.
  • минмак(): Користити минмак() функција за одређивање опсега величина за колоне или редове мреже. Осигурава да се ставке неће појавити премале или превелике на различитим екранима.

Не заборавите да прилагодите колоне и друге елементе као што су празнине између ставки мреже, величине фонта и маргина. Осигурава доследан и добро дизајниран распоред који добро функционише на различитим уређајима.

Истражите могућности ЦСС распореда мреже

Прихватање флексибилности и снаге ЦСС мреже омогућиће вам да направите изгледе који не само да изгледају сјајно, већ се и неприметно прилагођавају захтевима модерног веб дизајна. Дакле, зароните у свет мрежа, истражите могућности и унапредите своје вештине веб развоја.

Док улазите у системе распореда, можда ћете желети да упоредите друге методе распореда са ЦСС мрежама. То можете учинити помоћу ЦСС Флекбок модула. Ово ће вам помоћи да научите да одлучујете када радите на пројекту.