Web Design Responsiv - Grid-View. Construirea unui Grid-View responsiv.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
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%;}