![simple css responsive grid simple css responsive grid](https://www.tecforfun.com/wp-content/uploads/2021/05/image-6.png)
Large Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Try changing the screen size to see how it responds. 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 hero section will display as a two column grid on larger screens and switch to a single column on smaller screens.
![simple css responsive grid simple css responsive grid](https://planewarm.com/rrult/6eIYqW4O521yVRm4_Y9R3gHaDo.jpg)
Exampleīelow is a simple example that include a hero section and a content section. 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. This basically tells the browser to figure out how many columns should be displayed relative to the size of the screen. But, it turns out it can be even more powerful.Īdding auto-fit or auto-fill as the first argument to the repeat function is where the magic happens. The repeate syntax in itself is very handy. Or something similar to grid-template-columns: auto repeat(2, 1fr) if I wanted to include a sidebar.
![simple css responsive grid simple css responsive grid](https://i.pinimg.com/originals/bf/b8/e7/bfb8e79bf6acc1c6a4bc5d78bd4852fe.png)
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. That is, until I finally googled “responsive layout without media queries”. I couldn’t really prove that this feeling was legitimate until recently. Maybe I need to let grid do more of the work for me. I’ve had this nagging feeling lately that I’m writing too many media queries in my css.