Learning different CSS Layout types and how they work within a document are invaluable skills. This short article walks through a little experiment I did when i was testing my beginner knowledge of using CSS Grid and Flexbox together to build a responsive web page.
I really enjoyed my little project of translating a Graphic Design Grid into a Web page using CSS Grid, but the idea of building a standard website with CSS Grid was still tripping me up.
Setting CSS Grid Rows in my container element
So I went ahead and built something basic and standard with CSS Grid. My original grid’s template row height was set in pixels and adjusting heights for responsiveness is even too crazy for me, so I set my template rows as such:
grid-template-rows: repeat(12, minmax(0px, max-content));
Now I have a grid that is responsive ready. The above style sets my grid to 12 flexible rows that will shrink down to 0px if there were no content.
For me, building a standard site should start mobile and work back to desktop. But because I’m slightly mad, I built the desktop version first. In my head I was thinking “I just wanted to layout a header, sidebar, cover image, main area, and footer and see it all fit together.”
This later bit me in the butt. I am obsessive about building mobile first with “min-width” media queries (quite mad, since I started backwards).
Ooops Should have started Mobile First
It’s no shock that when I started shifting things around for responsiveness, I found CSS Grid to be clunky (or rather I blamed CSS Grid), BUT and this is a big BUT, I started my design as a desktop design, so working backwards from there using min-width media queries will always be more work (I am admitting I shouldn’t blame CSS Grid for the extra work as it was poor planning on my part). Check out more CSS mistakes to avoid, learned from my own boneheaded mistakes!
When I “respons-ified” my Graphic Design Grid, which was also built for desktop first, I used max-width media queries and it was incredibly less work.
The Three Things I Learned Using Grid and Flexbox Together:
1. If you are building with CSS Grid decide whether you are building for a mobile or desktop screen first…
if desktop then use max-width media queries
else use min-width. Not that hard, just think before you code…
2. Make your child elements display flex inside your Grid.
Laying out the ancestor elements of my Grid was infinitely easier when I set it’s child elements to “display:flex;”
The header element is the child of the .container which is set to display:grid;. The header has the Grid Child Properties set to it like grid-columns and grid-rows. But the header’s display property can be set to flex so that the header’s children take on the flex alignment properties.
display:flex; flex-flow:row nowrap; align-items:flex-end;
After I made the design responsive I started making it less standard and added my funky little touches.
I don’t like hearing things like “nobody uses box shadows anymore” and “nobody does rounded corners.” Well, whatever, I did and I think it looks fun, sue me (no don’t really I’m broke and I got mouths to feed).
At any rate I added my little responsive touches, the box shadow moves on hover over the elements meant to link somewhere, they also have a “ripple effect” I learned from Ben Szabo
3. CSS Grid can give you better control of your JavaScript Scroll Events.
Lastly, I added some JavaScript since I’m also in the process of honing those skills.
JavaScript may be easier to predict when using CSS Grid with scroll effects since a lot of the object properties will be effected by “positioned elements” meaning, if you are using a lot of elements with position relative, absolute, sticky, etc. , then your scroll effects are going to get very hard to predict. With CSS Grid you don’t have to use positioning very much.
I only have two elements with positioning properties added to them, my logo has position:absolute; and my .content-main has position:relative; so that my scroll functions work the way I expect them to.