Siatka na tej stronie jest bardziej adaptywna niż responsywna. Aby osiągnąć podobny efekt trzeba użyć media queries.
.siatka{
width:700px;
}
@media only screen and (max-width: 700px){
.siatka{
width:100%;
}
}
Powyższy zapis sprawi że gdy ekran zwęży się do szerokości siatki, jej szerokość zmieni się na 100% szerokości ekranu. Możesz ustawić wiele progów jeden pod drugim.
Nie wiem czy samo zrobienie siatki jest dla ciebie problemem, więc na razie zamieszczam tylko taką odpowiedź.
Pozdrawiam
_______________________________________________________
Przy takim kodzie html
<div class="siatka">
<img src="img.png" alt="sensowny opis">
<img src="img.png" alt="sensowny opis">
<img src="img.png" alt="sensowny opis">
<img src="img.png" alt="sensowny opis">
<img src="img.png" alt="sensowny opis">
<img src="img.png" alt="sensowny opis">
</div>
gdzie img.png powinny być zastąpione przez obrazki które mają być w komórkach siatki o TAKICH SAMYCH proporcjach (np 600px na 400px)
Taki kod css
.siatka{
margin-left: auto;
margin-right: auto;
width: 700px;
position: relative;
}
.siatka>img{
display: block;
float: left;
width: 32%;
height: auto;
margin: 0.5%
}
Gdzie:
- position:relative jest wymagany aby wartości procentowe odnosiły się do .siatka a nie do całego ekranu
- display:block jest wymagany żeby nie robiły się spacje między obrazkami
- float:left jest wymagany żeby img ustawiały się w jednym rzędzie
- width byłby 33% ale odjąłem dwukrotnie 0.5% żeby zrównoważyć prawy i lewy margines
- height nie jest ustawiony aby komórki zachowały proporcje takie jak mają grafiki
- margin-left:auto i margin-right:auto to tylko przykładowy sposób wycentrowania siatki
Uwaga, jeśli nie chcesz obrazków, to powinieneś stworzyć przezroczysty obrazek .png o pożądanych proporcjach i to go ustawić w background-image.
