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. 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). 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). 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.
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.
2.
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;" I tried creating a sub-grid at first, and that will take more study to be sure. For a simple design, I found that minimal effort was required when I set, for instance, the header element to:
display:flex; flex-flow:row nowrap; align-items:flex-end;
The header element is the child of the .container which is set to display:grid; And so 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.
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.
RESULT
Top comments (6)
Point Number 2: I typically don't use flex inside my grids unless there is a specific need to. We all learned how to layout content in a responsive manner before flex and grid. Flex and grid are just supposed to make it easier and/or faster. Flex does not (IMO), and sub grids are... trickier than they seem, for now. That first grid though.... damn! that's awesome.
Thank you!
Point #1: I always assume it needs to look perfect on both. The last website I made for "desktop only" was right after I made one for "mobile only" and that was right after the Palm Treo" came out... in the 90's I think... do others make a choice in this regard and make a website that doesn't work well on the one not chosen?
Not sure why anyone would want a website that only works on one and not the other, besides of course an intranet web app for a company that knew exactly who was going to use it with what browser and what screen etc... Am I missing a use case scenario?
Yes people design UI and CMS for desktop only.
They do? I love learning about why others do things. Learning about their uses cases and how they approach them is helpful for me to be prepared when i'm confronted with something similar.
So why do they come up with desktop only as a solution? Is it because it's faster and cheaper?
We'll some programs are too bulky or the tasks they perform are too detailed for mobile devices. Another use case would be a large department store site. The site would be built for desktop first since they would most likely offer an app as a smooth alternative to a site with a lot of functionality that would overload your data and make navigation frustrating.