No Time Dad

A blog about web development written by a busy dad

Simple Responsive Grid Without Media Queries

I’ve had this nagging feeling lately that I’m writing too many media queries in my css. Maybe I need to let grid do more of the work for me. I couldn’t really prove that this feeling was legitimate until recently. That is, until I finally googled “responsive layout without media queries”.

I’ll often make three column grids using grid-template-columns: repeat(3, 1fr);, which would give me three even width columns inside of a div. Or something similar to grid-template-columns: auto repeat(2, 1fr); if I wanted to include a sidebar. The repeate syntax in itself is very handy. But, it turns out it can be even more powerful.

Adding auto-fit or auto-fill as the first argument to the repeat function is where the magic happens. This basically tells the browser to figure out how many columns should be displayed relative to the size of the screen. I’ve been using auto-fit so far since it seems to get the spacing right everytime when the tracks collapse, but I’m sure there is a good use case for auto-fill too.

Example

Below is a simple example that include a hero section and a content section. Both sections are fully responsive. The hero section will display as a two column grid on larger screens and switch to a single column on smaller screens. The content section will generally be a 3-4 column grid, but it will keep adding columns for larger and larger screens, switching to single column on smaller screens.

The live demo can be viewed here. Try changing the screen size to see how it responds.

.Hero {
  padding: 2rem;
  background-color: lightskyblue;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.Content {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.Item {
  height: 350px;
  background-color: lightsalmon;
  border-radius: 0.5rem;
}
<div>
  <div class="Hero">
    <h1>Large Text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="Content">
    <div class="Item"></div>
    <div class="Item"></div>
    <div class="Item"></div>
    <div class="Item"></div>
  </div>
</div>

That’s not a lot of css for a responsive layout. It’s also not perfect either. On larger screens, I think there is too much space between the large text and the smaller text. Also, the size of the cards is changing based on the screen size, which might be expected, but I’d have to take some extra steps to ensure the content in the cards is ready for this size change.

This simple demo has me wondering what else is possible without the use of media queries. I feel like I’ve tapped into an area of css that I haven’t really explored yet. Using media queries definitely gives more fine grained control, but maybe I don’t need them as much as I once thought.