Responsive Grid with different sized elements

    0

    1

    .small { grid-column: 1 / span 2; grid-row: 1 / span 2; }

    The code creates a grid with five columns and 75 rows. The grid has a gap of 5 pixels, and the grid template columns are repeated every 100 pixels, with a minimum size of 1 pixel and a maximum size of 100 pixels. The grid has a flow of dense.

    .container {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      grid-auto-rows: 75px;
      grid-auto-flow: dense;
    }
    
    .horizontal {
      grid-column: span 2;
    }
    
    .vertical {
      grid-row: span 2;
    }
    
    .big {
      grid-column: span 2;
      grid-row: span 2;
    }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.