html - Layout quadrato griglia CSS




css3 css-grid (3)

** La risposta di @calcalan risolve il problema e tutto il credito riservato. **

Ciò ovviamente interrompe la forma quadrata, ma se si utilizza qualsiasi testo, una piccola regolazione funzionerà a tuo favore. Potresti piuttosto utilizzare lo pseudo elemento ::after per non spingere verso il basso o dividere il contenuto potenziale. Passare a display: block rimuove anche la necessità di vertical-aling: top per quanto ne so.

Per preservare ulteriormente le proporzioni quando si utilizza il testo, renderei la position: absolute del testo position: absolute .

Vedi lo snippet di seguito quando si utilizza ::before vs. ::after per illustrare il mio punto.

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}
<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>

Questa domanda ha già una risposta qui:

Sto cercando di creare una griglia / layout costituito da quadrati. Quattro quadrati in ogni riga. I quadrati non possono distorcere il ridimensionamento dello schermo. Larghezza e altezza devono essere sempre le stesse (non voglio valori fissi). Devo usare la griglia CSS. Qualcuno può aiutarmi ?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


Per il divertimento, la curiosità del comportamento della grid e per evitare uno pseudo elemento,

È inoltre possibile impostare un'altezza pari alla larghezza del contenitore della griglia, il sistema di griglia allungherà automaticamente le file.

Un buon promemoria per ricordare:

https://css-tricks.com/snippets/css/complete-guide-grid/

ed esempi https://gridbyexample.com/

esempio funzionante se la griglia utilizza l'intera larghezza del browser

  * {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: calc(50vw - 5px);  /*instead playing around with grid gap gap */
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
  /* bg to show i'm squarred or not ? */
  background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
 
 margin: 0 5px 5px 0;  /*instead playing around with grid gap gap */
  background-color: red;
}


/* extra for demo, not needed */

.container {
  counter-reset: test;
}

.container div {
  display: flex;  /* or grid */
}

.container div:before {
  counter-increment: test;
  content: 'Div N°:'counter(test)' -';
  margin: auto;/* center me */
  color: yellow;
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Un codepen da biforcarsi o giocare


Un altro trucco in cui è possibile inserire qualsiasi contenuto all'interno senza interrompere il rapporto. L'idea è quella di avere la griglia all'interno di un grande quadrato che si divide in piccoli quadrati:

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  display: block;
  padding-top: 100%;
}

body {
  position: relative;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
</div>

Un'altra sintassi senza position:absolute dove si può fare affidamento sulla funzione di stiramento di flexbox:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  padding-top: 100%;
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
<div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
</div>

Puoi controllare il limite di righe. In quanto sopra li ho fatti 4, possiamo averne solo 2 rendendo l'imbottitura 50% anziché 100% . All'interno avremo un grande rettangolo in cui saranno presenti 8 quadrati (4 in ogni riga).

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  padding-top: 50%;
}

body {
  display:flex;
  margin: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
</div>

Puoi controllare il numero di righe usando le variabili CSS:

:root {
  --n:6;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(var(--n),1fr);
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  padding-top: calc(var(--n) * 25%);
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
  display:block;
}
<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
</div>

Possiamo anche aggiungere un controllo sul numero di colonne aggiungendo un'altra variabile per avere qualcosa di più generico:

:root {
  --n:6;
  --m:6;
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--m),1fr);
  grid-template-rows: repeat(var(--n),1fr);
  grid-gap: 5px;
  flex-grow:1;
}

.container div {
  background-color: red;
}

body:before {
  content: "";
  padding-top: calc(var(--n)/var(--m) * 100%);
}

body {
  display:flex;
}

img {
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here</div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div></div>
  <div></div>
  <div><img src="https://picsum.photos/200/300?image=1069"></div>
  <div></div>
  <div><img src="https://picsum.photos/200/200?image=1062"></div>
  <div>any contet here any contet here</div>
  <div></div>
  <div></div>
</div>





css-grid