Grid layout

hey there, i'm wondering how you would go about creating a grid such as this one with columns of different width on different rows, i'd appreciate anyone's knowledge on this sort of thing, thanks in advance.
12 Replies
snxxwyy
snxxwyy16mo ago
Awesome, thanks a lot, I appreciate it Oh one quick question, is it okay if you explain to me why we don't set grid-template-columns or grid-template-rows for that sort of design?
dys 🐙
dys 🐙16mo ago
Because I'm specifying the start and span of every element, it sets the columns to the max column I access & the rows to the max row.
snxxwyy
snxxwyy16mo ago
Ohhh i understand now, thank you, and is the width of each element determined by the width of the container they're in as you're not setting a value in the template rows and columns?
dys 🐙
dys 🐙16mo ago
The leftmost sections, 3 & 6, have a grid-column of 9 / span 4 creating a grid with a de facto 13 columns. By default the available space is divided equally amongst these 13 columns. I added a box to the pen that, when checked, (not in Firefox, it uses a has selector) will set the grid-template-columns to repeat(6, 0fr) repeat(6, 1fr) which causes the first half to squish up.
snxxwyy
snxxwyy16mo ago
Ah so what you're saying is setting a set grid template column or row value will squish the content that can't fit in those requirements whilst on the other hand not setting those will set the width of the columns and rows by evenly dividing the space of the container between them? I also really appreciate you taking the time to go through this
dys 🐙
dys 🐙16mo ago
If you know an answer, why not post it publicly so everyone can benefit from it?
snxxwyy
snxxwyy16mo ago
Also may I ask, is this the most 'semantic' (if that's the right word) way of doing it?
dys 🐙
dys 🐙16mo ago
I went through and replaced the grid-columns & grid-rows with single grid-areas, & rather that specifying the start of the column, I relied on each starting after the last defined: https://codepen.io/u3b4/pen/BaGExjx It's about half as much CSS & as best I can tell is the minimum amount that would need to be specified to be precise.
snxxwyy
snxxwyy16mo ago
Ah thank you so much for your help, I'll be sure to experiment around with this
Å Marlon G
Å Marlon G16mo ago
https://www.youtube.com/watch?v=qNtJ5p3h2A4 Might give you some tips and tricks on further projects.
Layout Land
YouTube
Responsive Mondrian – a demo of CSS Grid
New technology for doing web page layout makes implementing old designs much easier. What is even more exciting, we can do new things — and take graphic design on the web to new heights. The modernists accomplished such a feat in the early 20th century, breaking up old styles and old layouts from the Victorian era. Jen takes a Mondrian painting ...
snxxwyy
snxxwyy16mo ago
thanks man, much appreciated 👍
Want results from more Discord servers?
Add your server