Auto-Sizing Columns in CSS Grid

#html #css #productivity #webdev

Hello guys today i am going to discuss auto-sizing columns in css grid system.

Lets get started....

Grid Layout -
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

How to apply grid -

.container{
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap:1rem;
}

Explaination -

Whats happening here is first we have define our grid and then in grid-template-columns , we have used the repeat(12,1fr) function which tells the browser to create 12 columns of equal fraction or size.

Well this is good for the large devices like laptop or desktop but when you see the grid in small devices like phone or tablet , the 12 column grid system will overflow horizontally and will not wrap the columns into a new row.

Screenshot below -

As you can see the columns are overflown horizontally , To Solve this problem, we will use auto-fill with minmax() function.

minmax() function -
The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.
autofill -
auto-fill FILLS the row with as many columns as it can fit. So it creates implicit columns whenever a new column can fit, because it’s trying to FILL the row with as many columns as it can. The newly added columns can and may be empty, but they will still occupy a designated space in the row.

How to apply -

 display: grid;
 grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
.
.
.

OUTPUT -

As you can see the columns are adjusting to the next row automatically when the device screen size reduces.

The styling used in my code is -

HTML -

 <div className='box'>
    <div class="elements">Element 1</div>
    <div class="elements">Element 2</div>
    <div class="elements">Element 3</div>
    <div class="elements">Element 4</div>
    .
    .
    .
    .
    .
    .
    .
    .
    <div class="elements">Element 30</div>
  </div>

CSS -

.box{
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
  grid-gap: 1rem;
  padding: 1rem;
  background: linear-gradient(to right, #243B55, #141E30);
}
.elements{
  color: whitesmoke;
  background-color: var(--blue);
  border-radius: 50%;
  text-align: center;
  padding: 2rem;
}