Css Grids Cheatsheet

I’ve just started using grids. So this is just a handy place to store examples.

Easy Table (with equal width columns)

I’ve set it to be 3 columns ( grid-template-columns )

The first 3 divs are placed into columns 1,2,3. It then moves onto next line/row, and repeats this pattern.

<style>
#container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>

<div id="container">
            
            <div class="">Quiz 1</div>
            <div>Some blurb about questions</div>
            <div>10 questions</div>
        
                
            <div class="">Quiz 2</div>
            <div>Some other blurb about questions</div>
            <div>20 questions</div>
        
                
            <div class="">Quiz 3</div>
            <div>Again more blurb</div>
            <div>10 questions</div>
        
</div>