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
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?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.
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?
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.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
If you know an answer, why not post it publicly so everyone can benefit from it?
Also may I ask, is this the most 'semantic' (if that's the right word) way of doing it?
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.Ah thank you so much for your help, I'll be sure to experiment around with this
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 ...
thanks man, much appreciated 👍