Како створити једноставан образац помоћу ЦСС мреже

У претходном чланку сте научили да креирате једноставан образац помоћу Флекбок-а. Данас ћете разумети како да направите исту ствар са ЦСС мрежом.

Ево шта градимо:

Израда форме помоћу ЦСС мреже

Са горње слике знамо да образац садржи два елемента:

  1. Поље е-поште
  2. Дугме за слање

Ево ХТМЛ-а:

  Send 

Да бисте изградили образац помоћу ЦСС мреже, морате да подесите displayсвојство родитеља на grid.

form { display: grid; }

Ево шта добијате:

Зашто смо добили два реда?

Добијамо два реда јер нисмо навели број колона за мрежу. Прегледачи ће увек подразумевано имати једну колону.

За овај образац морамо поставити две колоне.

  1. Прва колона треба да се прошири како би попунила сав расположиви простор
  2. Друга колона треба да буде величине према њеном садржају

За прву колону можемо користити frјединицу. За другу колону можемо користити auto.

form { display: grid; grid-template-columns: 1fr auto; }

Овим сте довршили изглед обрасца. Ево Цодепена за поигравање:

Једноставна форма са ЦСС мрежом Зелл Лиев (@зеллвк) на ЦодеПен-у.

Када су елементи неједнаке висине

Симулираћемо елементе неједнаке висине заменом buttonтекста СВГ-ом. Ово је исто као и оно што смо урадили у претходном чланку.

Приметите да се inputвисина повећава како би одговарала и великој СВГ икони! Још једном, не морамо да напишемо додатни код. То се догађа зато што су ставке мреже вертикално развучене како би попуниле сваки расположиви простор.

Ако желите да промените ово понашање, можете променити align-itemsимовину или start, endили center.

Ево Цодепена за поигравање:

Једноставна форма са ЦСС мрежом (са СВГ дугметом) аутора Зелл Лиев (@зеллвк) на ЦодеПен-у.

Окончање

ЦСС Грид олакшава креирање распореда. Не мора се користити за распоређивање макронаредби. Такође се може користити за микро распореде попут примера обрасца који сте овде видели.

Забавите се уз ЦСС Грид!

Хвала за читање. Да ли вам је овај чланак на било који начин помогао? Ако јесте, надам се да ћете размислити о томе. Можда некоме помогнеш. Хвала вам!

Овај чланак је првобитно објављен на мом блогу.

Пријавите се за мој билтен ако желите још чланака који ће вам помоћи да постанете бољи фронт-енд програмер.