Grid layout system for 1300px
Hello, I have to create a design system based on a mockup that follows a grid. Designers provide a mockup for the widest desktop format at 1440 pixels (container 1300px 12 columns), and a mobile.
For the example i talk about the desktop grid.
Currently, I'm using the same structure but without a grid system, based on flexbox. To adhere to the mockup, I take a block with a fixed pixel value, then set the others as auto flex (depending on the section, of course).
I would like to find a more modern approach using recent CSS rules, so that a backend developer or front-end can more easily define their blocks just by counting the number of columns used, without having to inspect the mockup with precision.
I'm turning to grid because it is becoming more widely used and accessible, especially with subgrid. It allows, thanks to the web inspector, an easy visualization of elements on the grid. I find it pleasant and user-friendly.
I would like to find the best approach for code that is maintainable in the long term.
ℹ️ Wireframe screenshot explain :
Section fullwidth > Container grid 12 > bloc > item(content)
- A body that contain infinite rows where I can, if needed, move #the-section-3 to 1 for example
- Multiple sections that contain a .container 12 columns and blocs inside
- Items inside a bloc is not subgrid to 12columns I don’t see a usecase of that.
🟥 Problems :
- There are a lot of .container grids in the page which are potentially heavy to load ?
And hard to find the right .container in the Chrome inspector list to display the grid
- I had thought I could use @container query based on a block so that each item content fits in that block, but it doesn't work with subgrid 🤔
- every tutorial I watch for the grid system is always based on a full width grid, if you have an ultra wide screen you see content that fits full screen, I'm curious why no one applies the classic rendering of a web page with a page container.
https://codepen.io/VictorUx/pen/GReZxQb
8 Replies
Don’t use 12 columns, use the number of columns you need, and also columns don’t have to be page wide. Like you could have 2 columns, 1 column, 3 columns for the example image
Also do use flexbox in places rather than having a rigid number of columns/column width
CSS frameworks that use 12 columns at the time they were doing what they could to make things work, but we have tools now which makes 12 columns a backwards way to do things
Thank you for the answer, i get it it's lighter than setting 12 for nothing, but i need to creat a grid template for each container too.
I'm trying to learn and apply grid, but I feel like it's worse than using a flexbox layout
my ideal view on this was that I create a layout based on a mockup, and in each area I can insert a components in which I can @container query
i found a problem on that if i remove the 12 columns, if i have 2 columns not equal, like 1 should be 1 / 8 and the second 9 / -1, you need to specify value for your column manually which is actually what i do in flexbox in pixel.
I'm trying to learn and apply grid, but I feel like it's worse than using a flexbox layoutGrid is different. It's worse in some situations, and better in others. It's best in either to not set up a rigid system and then try to fit your design in that system, but to set up the number of columns and rows you need for each design.
you can use
grid-template-areas to define where things go in a grid too, or a number of other ways as well including named stops. Kevin has a recent video about those https://www.youtube.com/watch?v=cf-J4ffMBfoKevin Powell
YouTube
Probably the most underrated (and useful) CSS feature
Looking to step up your CSS games? I’ve got free and premium courses to help you out! 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=named-grid-lines
I don’t think I’m alone in not using named grid lines very often. They are something I dismissed early on because I figured line numbers were good enough and f...
grid-template-areas is even worse, my website is not static.
I think i will stay on flexbox
I experimented with grid because it seemed more visual and easier to maintain for zoning, but there is so much problem with it and subgrid.
before I used grid only to display a list of cards products, etc.
but it seems that it is not intended to be used at the master layout level
You can move around the grids. Grid is fantastic for responsive websites
You can guarantee that things will move to the correct area
it's perfectly suitable for master layout level, don't hamper yourself by not using tools the way they are designed to be used
This video was the start of my reflexion, but i can't apply this code on my project because i'm on Drupal, there is so much div added by the cms that broke everything.
and by default all Section should be fullwidth with a white background or not
if anyone has a better idea or a codepen to share I would love to learn more and improve my template 🙏