Jak zrobić responzywną siatkę wpisów jak na stronie pana Mirka

pytanie zadane 31 lipca 2016 w HTML i CSS przez Jakub Wróbel Użytkownik (920 p.)
edycja 31 lipca 2016 przez Jakub Wróbel

Jak w temacie, za odpowiedzi gorąco dziękuję.

Link do strony: miroslawzelent.pl

2 odpowiedzi

odpowiedź 31 lipca 2016 przez Comandeer Guru (602,340 p.)

odpowiedź 31 lipca 2016 przez Spiral Obywatel (1,330 p.)
edycja 31 lipca 2016 przez Spiral

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.

komentarz 31 lipca 2016 przez Jakub Wróbel Użytkownik (920 p.)

Czy mógłbyś pomóc mi w zrobieniu takiej siatki?

komentarz 31 lipca 2016 przez Spiral Obywatel (1,330 p.)

Oczywiście, ale musiałbym najpierw wiedzieć co ma się w niej znajdować, z jakich elementów ma się składać siatka, jakikolwiek opis twoich potrzeb. Jeśli masz już jakiś kod, to też by nie zaszkodził. Trudno doradzać w ciemno.

Czekam na więcej szczegółów.