Trying to make a simple grid layout
I would like to create a grid layout to simplify the creation of sections on my site for devs through a simple layout.
Each section would contain a .container grid which adds 2 columns by default (and forces it to 1 on mobile).
the idea is to define custom layout columns per section (iso wireframe ratio) without specifying the pixel size of the cells.
As most sections contain 2 columns, I would like to be able to set the size of the first block only, and the second is auto fill (IF POSSIBLE ?).
and the block component inside would adapt with @container query based on that column.
My question, Is it possible to make the construction faster and simpler ? 🤔
For example .section-1 which is in 2 columns, is it possible to define only block-1 (span 4) and block-2 to take all of the remaining space automatically
(without having to specify grid-column: 5/-1;) ?
(like a flex-grow would do)
thank you 🙏
Source code : https://codepen.io/VictorUx/pen/JjzZrwm
2 Replies
If you want grid items to span multiple columns, then you need to explicitly declare that. It's simply how grid works.
Usually, when someone asks "like flexbox would do" (or the opposite of "like grid would do"), I usually start by asking if there is a reason you don't want to use flexbox to start with?
Alternatively, is there a reason you're defining so many columns, when you only want 2 total?
Like, for section 1, instead of 6 columns, couldn't it just be something like
grid-template-columns: 2fr 1fr ? Then you don't have to declare anything for the children either. (This will be slightly different than the codepen you shared, because of the extra gaps when you have mutliple columns, but it'll be very similar, as it's the same 2:1 ratio)thanks for the reply 🙂 Ok i need to explicitly declare.
Currently my site is built in flexbox, it was built respecting the size of the wireframe blocks. for example, if there's two blocks the first has a fixed value, the second is flex:1.
the new site with the new wireframe (see screen). Each section respects a column ratio which is perfect for a grid layout i think.
In figma a dev can easily guess the number of columns for each section > container having the same rendering and without having to specify a fixed value. You just need to container query your component inside.
if i use the grid-template-columns: 2fr 1fr the render is not iso wireframe 😬 .
I don't know if its better to set 6 columns for the section-1 Header, instead of 2 columns (and align right the card component inside).
