Web Design Responsiv - Grid-View. Construirea unui Grid-View responsiv.

Construirea unui Grid-View responsiv

Vom începe să construim un Grid-View responsiv.

Mai întâi asigurați-vă că toate elementele HTML au proprietatea box-sizing setată pe border-box. Acest lucru asigură că padding și border sunt incluse în lățimea totală și înălțimea (total width and height) elementelor.

Adăugați următorul cod în CSS:

* {
  box-sizing: border-box;
}

Următorul exemplu arată o pagină web responsive simplă, cu două coloane:



Exemplu:

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Exemplul de mai sus este bun dacă pagina web conține doar două coloane.

Cu toate acestea, dorim să utilizăm un  grid-view responsiv cu 12 coloane, pentru a avea mai mult control asupra paginii web.

Mai întâi trebuie să calculăm procentul pentru o coloană: 100% / 12 coloane = 8,33%.

Apoi realizăm o clasă pentru fiecare din cele 12 coloane, class="col-"  și un număr care definește câte coloane ar trebui să se întindă (span):

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}