Шта је Грид Проперти?

Својство решетке је својство скраћења за редове решетка-предложак-решетке, колоне-шаблона-решетка, поља-шаблона-решетка, мрежне-аутоматске редове, колоне мреже-ауто-проток, мрежни-проток мреже, размак-колону-колону и својства размака у низу решетки.

Структура решетке

Својство решетке чини да се елементи приказују као матрица ⊞

<див ид = "контејнер">
 <див> 
 <див> 
 <див> 
 <див> 
 <див> 
 <див> 
 <див> 
 <див> 

Ин цсс

#контејнер {
 дисплеј: решетка;
 }

На пример, #цонтаинер је приказан као решетка и његови подређени елементи ће бити приказани као ћелије мреже или ставке

Компатибилност прегледача

Велико је узбуђење што ИЕ, Едге, Фирефок подржава својство ЦСС мреже . Већини прегледача је предиван кориснички интерфејс за преглед мреже у алатима за програмере.

Грид Линес

Линијске мреже су хоризонталне и вертикалне линије, користе се за позиционирање. Индекс позиционирања може бити цијели број (и негативни и позитивни цијели бројеви).

Својства → грид-цолумн-старт, грид-цолумн-енд, грид-ров-енд, грид-ров-енд-енд.

Пример кода:

#грид> див: нтх-дете (2) {
 грид-цолумн-старт: 2;
 решетка-колона-крај: 3;
 грид-ров-старт: 2;
 грид-ров-енд: 3;
}

Елемент 2 започет ће другом вертикалном линијом у 2 хоризонталној линији, а елемент ће завршити у 3 вертикалне и 3 вертикалне линије.

Грид Лине

Грид ћелија

Ћелија решетке је простор између две суседне вертикалне линије решетке и две суседне хоризонталне мреже решетке.

Грид Целл

Грид Трацкс

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

Грид Трацк

Грид Ареа & Грид Гап

Подручје решетке је група једне или више ћелија.

Грид Гап је размак између редова и ступаца. То је својство скраћења мреже решетке-реда-зазора и решетке-ступаца-размака.

Грид Ров & Грид ступац

грид-ров је својство скраћења за почетак грид-ров-старт и грид-ров-енд.

грид-цолумн је својство скраћења за грид-цолумн-старт и грид-цолумн-енд

Грид ров

грид-ров-старт → одређује почетну позицију ставке мреже у реду

нпр. грид-ров-старт: 2 → Елемент ће започети у другој вертикалној линији

грид-ров-енд → одређује крајњу позицију ставке решетке у реду

нпр. крај-ред-крај: 3 → Елемент ће се завршити у другој вертикалној линији

Грид - аутоматски проток

Контролише како алгоритам аутоматског постављања ради. Подразумевано је вредност ред (Ставке су смештене у основу реда)

грид-ауто-флов: ред;
грид-ауто-флов: колона;
Грид аутоматски ток ступаца и решетка аутоматског протока реда

грид-ауто-флов: ред густ → Користи алгоритам „паковања“ паковања. Попуните слободан простор у мрежи по редовима.

грид-ауто-флов: колона густа → Користи алгоритам за паковање густог простора. Попуните слободан простор у мрежи на бази ступаца

Експлицитна мрежа и нејасна мрежа

Експлицитна мрежа је мрежа креирана од стране корисника помоћу грид-темплате-ров, грид-темплате-ступца

грид-темплате-ступци: поновите (3, 100пк);
ред-темплате-ровс: 100пк 100пк;

Имплицитна мрежа креира прегледач. Величина имплицитне мреже може се модификовати користећи грид-ауто-ступце и својство грид-ауто-ровс.

грид-темплате-ступци: поновите (3, 100пк);
грид-ауто-редови: 100 пиксела;

Редослед мреже:

Елемент можемо наручити по својству подручја предлошка.

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

проверите шифру за више.

За мрежу углавном користимо систем за подизање система за подизање система. Боотстрап може да промени неко име класе у свакој верзији (али не као угаоно ), тако да морамо да се сетимо која верзија има име класе .

Користећи својство ЦСС мреже, МОЖЕМО (чак и у ИЕ ) лако приказати елементе у приказу мреже.

Пуно хвала на читању! Ако вам се свидело, подржите је пљеском и дељењем поста. Слободно оставите коментар испод.