Crea una divisione di due righe in una griglia

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 Previsto

    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; }