Layout a griglia con immagini

layout di griglia con imges

Sto cercando di build questo layout di griglia per le immagini con HTML e CSS.

Mi piacerebbe usare divs piuttosto che table ma non sono sicuro di quale sia il modo migliore per andare. Inoltre ho bisogno di mettere una breve descrizione sotto ogni immagine.

    Ho creato questo semplice layout reattivo usando float e padding-bottom .

    Il fondo del padding viene utilizzato per simulare l’altezza degli elementi.

    Può essere un buon inizio per te. Se vuoi andare oltre e imparare di più come ad esempio aggiungere immagini / testo reattivi all’interno di quei quadrati, ti consiglio di controllare la griglia dei quadrati reattivi . Descrive in dettaglio un modo per ottenere una griglia retriggers di quadrati con contenuto centrato.

     div { float: left; } div > div { background: #2C3E50; } #big_wrap, #small_wrap { width: 50%; } #big_wrap > div { width: 48%; padding-bottom: 48%; margin: 1%; } #small_wrap > div { width: 31.333%; padding-bottom: 31.333%; margin: 1%; } 
     

    Usa questo layout: –

    HTML

     

    CSS

     .main { width:100%; float:left; height:1%; } .child { width:50%; float:left; } .four { width: 96%; float:left; height: 150px; background:#35a; margin: 2% 0; } .nine { width:96%; float:left; height: 100px; background:#35a; margin: 2% 0; } .left { width:50%; float:left; } .right { width:33%; float:left; }