How can we create grid panel using CSS?

 


In CSS we can use minmax() function to create grid panel effect. The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max . The minmax() function accepts two parameters, a minimum value and a maximum value.

minmax(min, max)
Below code can be used to create grid panel:
CSS:

body {
  margin: 40px;
}
.wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr) ) ;
        background-color: #fff;
        color: #444;
    }

.grid {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 15px;
        font-size: 150%;
    }

HTML:

    <div class="wrapper">
    <div class="grid">A</div>
    <div class="grid">B</div>
    <div class="grid">C</div>
    <div class="grid">D</div>
  </div>

 


Related #tags:     #html     #css    

Related questions




Looking for change? Click below to prepare for technical interview.


Technical Interview Questions