Naprzemienny grid

Question

Witam,

 

Jak uzyskać efekt naprzemiennego ustawienia divów, gdzie jeden z nich jest wyższy od pozostałych, a kolejne są nieco wyżej niż siatka?

Answer 1

definiujesz najpierw układ siatki w kontenerze:

 

display: grid;
grid-template-columns: ( w tym przypadku który podałeś są 2) 250px 250px;
grid-template-rows:(tu są widoczne trzy z odstępami) 250px 250px 250px;
grid-gap: 20px 50px;

 

I potem tworzysz trzy divy:

<div id="jeden"></div>

<div id="dwa"></div>

<div id="trzy"></div>

 

I każdego przypisujesz odpowiednio:

#jeden{

grid-column:2;

grid-row:1;

}

#dwa{

grid-column:1;

grid-row:1/2;

}

#trzy{

grid-column:2;

grid-row:3;

}

 

Comments

Da się zrobić, aby wysokość tych boxów była zależna od tekstu?

Gdy jest go zbyt dużo to po prostu z nich "wyjeżdża".

---

w tym przypadku musisz użyć skalowania wewnętrznego diva- poczytaj o fit-content, max-content i min-content.