Siatka reagujących kwadratów
Zastanawiam się, jak mógłbym stworzyć układ z responsywnymi kwadratami. Każdy kwadrat miałby w pionie i poziomie Zawartość. Konkretny przykład jest wyświetlany poniżej...
5 answers
Możesz utworzyć responsywną siatkę kwadratów z pionowo i poziomo wyśrodkowaną treścią tylko za pomocą CSS. Wyjaśnię, jak w procesie krok po kroku, ale najpierw tutaj są 2 dema tego, co można osiągnąć: {]}
Teraz zobaczmy, jak sprawić, by te fantazyjne reagowały kwadraty!
1. Tworzenie responsywnych kwadratów:
Sztuczka na utrzymanie kwadratu elementów (lub jakiegokolwiek innego współczynnika kształtu) polega na użyciu procentu padding-bottom
.
uwaga dodatkowa: możesz użyć górnego marginesu lub górnego / dolnego marginesu, ale tło elementu nie będzie się wyświetlać.
Ponieważ Top padding jest obliczany zgodnie z szerokością elementu nadrzędnego (Zobacz MDN dla odniesienia ), Wysokość elementu zmieni się zgodnie z jego szerokością. Możesz teraz zachować jego proporcje zgodnie z jego szerokością.
W tym momencie możesz kodować:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Oto przykład prostego układu z siatki 3 * 3 kwadratów za pomocą powyższego kodu.
Dzięki tej technice możesz zrobić dowolny inny współczynnik proporcji, oto tabela z wartościami dolnej wyściółki zgodnie ze współczynnikiem proporcji i 30% szerokość.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. Dodawanie treści wewnątrz kwadratów
Ponieważ nie można dodawać zawartości bezpośrednio wewnątrz kwadratów (to zwiększyłoby ich wysokość i kwadraty nie byłyby już kwadratami), należy utworzyć elementy potomne (w tym przykładzie używam divów) wewnątrz nich z position: absolute;
i umieścić zawartość wewnątrz nich. Spowoduje to usunięcie zawartości z przepływu i zachowanie rozmiaru kwadratu.
Nie zapomnij dodać position:relative;
na div rodzica, więc absolutne dzieci są ustawione / wielkości w stosunku do ich rodzica.
Dodajmy trochę treści do naszej siatki kwadratów 3x3:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
3.Centrowanie treści
Poziomo:
To całkiem proste, wystarczy dodać text-align:center
do .content
.
wynik
Wyrównanie pionowe
To staje się poważne! Sztuczka polega na użyciu
display:table;
/* and */
display:table-cell;
vertical-align:middle;
Ale Nie możemy używać display:table;
na .square
lub .content
div, ponieważ jest to sprzeczne z position:absolute;
, więc musimy stworzyć dwoje dzieci wewnątrz .content
div. Nasz kod będzie aktualizowany w następujący sposób:]}
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
Już skończyliśmy i możemy wziąć spójrz na wynik tutaj:
WYNIKI NA ŻYWO FULLSCREEN
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-17 19:54:49
Możesz użyć jednostek VW (view-width), które sprawią, że kwadraty będą responsywne zgodnie z szerokością ekranu.
Krótka makieta tego będzie:
html,
body {
margin: 0;
padding: 0;
}
div {
height: 25vw;
width: 25vw;
background: tomato;
display: inline-block;
text-align: center;
line-height: 25vw;
font-size: 20vw;
margin-right: -4px;
position: relative;
}
/*demo only*/
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: rgba(200, 200, 200, 0.6);
transition: all 0.4s;
}
div:hover:before {
background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-12 09:38:18
Przyjęta odpowiedź jest świetna, jednak można to zrobić za pomocą flexbox
.
Oto system siatki napisany za pomocą składni bem, która pozwala na wyświetlenie 1-10 kolumn w wierszu.
Jeśli ostatni wiersz jest niekompletny (na przykład wybrano 5 komórek w wierszu i jest 7 elementów), końcowe elementy będą wyśrodkowane poziomo. Aby kontrolować poziome wyrównanie elementów końcowych, po prostu zmień justify-content
nieruchomość Pod .square-grid
klasy.
.square-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square-grid__cell {
background-color: rgba(0, 0, 0, 0.03);
box-shadow: 0 0 0 1px black;
overflow: hidden;
position: relative;
}
.square-grid__content {
left: 0;
position: absolute;
top: 0;
}
.square-grid__cell:after {
content: '';
display: block;
padding-bottom: 100%;
}
// Sizes – Number of cells per row
.square-grid__cell--10 {
flex-basis: 10%;
}
.square-grid__cell--9 {
flex-basis: 11.1111111%;
}
.square-grid__cell--8 {
flex-basis: 12.5%;
}
.square-grid__cell--7 {
flex-basis: 14.2857143%;
}
.square-grid__cell--6 {
flex-basis: 16.6666667%;
}
.square-grid__cell--5 {
flex-basis: 20%;
}
.square-grid__cell--4 {
flex-basis: 25%;
}
.square-grid__cell--3 {
flex-basis: 33.333%;
}
.square-grid__cell--2 {
flex-basis: 50%;
}
.square-grid__cell--1 {
flex-basis: 100%;
}
.square-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.square-grid__cell {
background-color: rgba(0, 0, 0, 0.03);
box-shadow: 0 0 0 1px black;
overflow: hidden;
position: relative;
}
.square-grid__content {
left: 0;
position: absolute;
top: 0;
}
.square-grid__cell:after {
content: '';
display: block;
padding-bottom: 100%;
}
// Sizes – Number of cells per row
.square-grid__cell--10 {
flex-basis: 10%;
}
.square-grid__cell--9 {
flex-basis: 11.1111111%;
}
.square-grid__cell--8 {
flex-basis: 12.5%;
}
.square-grid__cell--7 {
flex-basis: 14.2857143%;
}
.square-grid__cell--6 {
flex-basis: 16.6666667%;
}
.square-grid__cell--5 {
flex-basis: 20%;
}
.square-grid__cell--4 {
flex-basis: 25%;
}
.square-grid__cell--3 {
flex-basis: 33.333%;
}
.square-grid__cell--2 {
flex-basis: 50%;
}
.square-grid__cell--1 {
flex-basis: 100%;
}
<div class='square-grid'>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
<div class='square-grid__cell square-grid__cell--7'>
<div class='square-grid__content'>
Some content
</div>
</div>
</div>
Https://jsfiddle.net/patrickberkeley/noLm1r45/3/
To jest testowane w FF i Chrome.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-24 01:01:09
Używam tego rozwiązania do responsywnych pudełek o różnych racjach:
HTML:
<div class="box ratio1_1">
<div class="box-content">
... CONTENT HERE ...
</div>
</div>
CSS:
.box-content {
width: 100%; height: 100%;
top: 0;right: 0;bottom: 0;left: 0;
position: absolute;
}
.box {
position: relative;
width: 100%;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }
Zobacz demo na JSfiddle.net
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-30 17:46:21
Teraz możemy to łatwo zrobić za pomocą aspect-ratio
ref własność
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
grid-gap: 10px;
}
.container>* {
aspect-ratio: 1 / 1; /* a square ratio */
border: 1px solid;
/* center content */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
img {
max-width: 100%;
display: block;
}
<div class="container">
<div> some content here </div>
<div><img src="https://picsum.photos/id/25/400/400"></div>
<div>
<h1>a title</h1>
</div>
<div>more and more content <br>here</div>
<div>
<h2>another title</h2>
</div>
<div><img src="https://picsum.photos/id/104/400/400"></div>
</div>
Również jak poniżej gdzie możemy mieć zmienną liczbę kolumn
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
}
.container>* {
aspect-ratio: 1 / 1; /* a square ratio */
border: 1px solid;
/* center content */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
img {
max-width: 100%;
display: block;
}
<div class="container">
<div> some content here </div>
<div><img src="https://picsum.photos/id/25/400/400"></div>
<div>
<h1>a title</h1>
</div>
<div>more and more content <br>here</div>
<div>
<h2>another title</h2>
</div>
<div><img src="https://picsum.photos/id/104/400/400"></div>
<div>more and more content <br>here</div>
<div>
<h2>another title</h2>
</div>
<div><img src="https://picsum.photos/id/104/400/400"></div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-31 08:56:12