# .css auto adjust columns @media

This is tagged at the "class" in the HTML.

If you are using this for a Hubl module, include a class area for that module. Most likely you will put it at the beginning or first <div> for that module.

```html
<div class="row">
```

In the .css you will include the following:

```css
.row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}
@media(max-width: 992px){
  .row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media(max-width: 600px){
  .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media(max-width: 480px){
  .row {
    grid-template-columns: 1fr;
  }
}
```

`repeat(4, 1fr)` You can adjust this to as many columns as needed repeat(3, 1fr) or, repeat(4, 1fr) or whatever.