Ho una pagina piena di blocchi che si accumulano con il display: inline-block
. Voglio fare quattro o due volte più grande, quindi ho usato il float: left
o right
per mettere altri blocchi in giro.
Il mio problema è che se ho una riga di cinque elementi , come posso inserire un elemento più grande nel mezzo ? (come float
mette naturalmente sul lato).
Ecco uno snippet di esempio:
#wrapper{ width: 516px; } .block{ display: inline-block; width: 90px; height: 50px; margin: 5px; background-color: red; } .bigger{ height: 110px; }
Ecco cosa mi piacerebbe avere dal frammento sopra
Hai fissato altezze sugli elementi figlio ( .block
). Sulla base di tali informazioni, possiamo estrapolare l’altezza del contenitore ( #wrapper
).
Conoscendo l’altezza del contenitore, è ansible ottenere il layout utilizzando CSS Flexbox con flex-direction: column
e flex-wrap: wrap
.
Un’altezza fissa sul contenitore funge da punto di interruzione, indicando gli elementi flessibili in cui avvolgere.
#wrapper { display: flex; flex-direction: column; flex-wrap: wrap; height: 120px; width: 516px; } .block { width: 90px; flex: 0 0 50px; margin: 5px; background-color: red; } .bigger { flex-basis: 110px; }
Affinché il layout funzioni con Flexbox, è necessario utilizzare contenitori annidati o conoscere l’altezza del contenitore ( vedere la mia altra risposta in questa pagina ). Non così con Grid. La struttura del codice è molto semplice.
#wrapper { display: grid; /* 1 */ grid-template-columns: repeat(5, 90px); /* 2 */ grid-auto-rows: 50px; /* 3 */ grid-gap: 10px; /* 4 */ width: 516px; } .bigger { grid-row: 1 / 3; /* 5 */ grid-column: 2 / 3; /* 6 */ } .block { background-color: red; }