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

Susține Lectii-Virtuale!

Construirea unui Grid-View responsiv - continuare

Toate aceste coloane ar trebui să plutească (floating) spre stânga și să aibă un padding de 15px:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Fiecare rând trebuie înfășurat (wrapped) într-un <div>. Numărul de coloane din interiorul unui rând ar trebui să adune întotdeauna până la 12:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Coloanele din interiorul unui rând plutesc (floating) spre stânga și, prin urmare, sunt scoase din fluxul paginii, iar alte elemente vor fi plasate ca și cum coloanele nu ar exista. Pentru a preveni acest lucru, vom adăuga un stil care curăță fluxul:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

De asemenea, dorim să adăugăm câteva stiluri și culori pentru ca acesta să arate mai bine:

Exemplu:

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}