Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Designing for CSS Grid.

Hi all,

I wanted to get a discussion started on CSS Grid and its use for designing websites.

I think CSS Grid is amazing and is going to revolutionise how websites are designed in the future. I can design web pages in CSS Grid pretty easily. I'm getting more and more familiar now with the style rules involved. But what I'm concerned more with is using named Grid areas.

At the moment I'm designing a website that uses Grid for desktop websites and regular display: block for mobile devices. In this site, I've got the layout I want for the home page. I've read a number of resources and articles for CSS Grid but none of them seems to answer the question "What do I do about the other pages in my design?".

"Don't use named grid areas" seems to be one answer that comes to mind. But that's my technique right now. At the moment I'm trying the technique of having one block of named grid areas in grid-template-areas: "" and filling all the areas I'm using across the pages into that area. I then organise the grid areas into elements separated by comments. As you can imagine, the block is growing in size.

This seems to work, but I don't like it. It seems too picky, too hard to organise and pick up again when I come back to it in the future.

So I want to focus again on the question... how do you design for multiple pages using CSS Grid.

  • Can I design for layouts for individual pages but don't use specific class names?
  • Should I plan out specific layouts for separate pages with multiple grid-template-area styles?

Basically, what is best practice?

4 Answers

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Hi, Jonathan,

Weeks ago, after formatting several html pages, and styling those experimental pages with CSS Grid, I began thinking what I'd do if more pages were considered. 'Oh, well,' I thought, 'sooner or later I'll find out what others have done.' I've not veered too much from grid-template-areas. I imagine those lines of code relative to a chess board, leaving comments as bread-crumbs.

In my quiet way as a front-end designer yet-to-be developer, I'm a champion of CSS Grid including pages' accessibility and responsiveness.

You asked:

What do I do about the other pages in my design? Can I design for layouts for individual pages but don't use specific class names? Should I plan out specific layouts for separate pages with multiple grid-template-area styles? Basically, what is best practice?

To all of the above, I'd say, 'I Don't Know, yet.' :smile: According to both Jen Simmons and Rachel Andrew, these are still early days of discovering what can Grid not do.

See Labs Jen Simmons where Jen shows her experiment with boxiness. It looks like she's turned a grid some 45 degrees, I think, while keeping the page responsive. What she's accomplished is fascinating, and keeps me coding! Related to Jen's Labs page are two View Page Sources, which might help answer your questions. Perhaps?

<link rel="stylesheet" href="https://use.typekit.net/smi4hhm.css">
<link rel="stylesheet" href="assets/css/styles.css">

The Way We Talk About CSS Published on the 04 October 2018 by Rachel Andrew. Rachel's article, for me, hints philosophical thought as much as technical. In her article, Rachel references Incomplete List of Mistakes in the Design of CSS recently updated Oct 8, 2018. Her final paragraph:

There are things in CSS that are not intuitive, or seem at odds with the rest of the system. Many of those are due to legacy reasons and the fact we can’t break the web, however they can be read about and understood. We know these things exist. The fact they exist does not prevent us from moving forward to redefining our understanding of CSS as used for layout. An elegant system, far more powerful than any framework, designed for the realities of a flexible, multilingual, multi-device web. Then, as we push at the edges of that new system, to find the gaps, the things we cannot yet do, and help to make the next phase a reality.

I'd like to think this discussion will continue from time to time. I, for one, will peek in here.

David

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Thanks for all your responses. Nothing like a bit of light reading! :-)

Kalle Jungstedt
Kalle Jungstedt
4,709 Points
Kalle Jungstedt
Kalle Jungstedt
4,709 Points

I go about it in two different ways at the same time.

I have a basic layout/grid where I put my header, footer, aside etc. . And I leave a main block usually called main in the middle or where you want it on your page.

Grid-template-areas: ”Header header header” ”Aside. Main. Main” Aside Main Main” ”Footer. Footer. Footer”;

Then I use this setup for all my pages on the site. But for every page on the site I create a subgrid that I put in the main area.

.subgrid { grid-area: main; display: grid; /* and here tou create your new subgrid*/ grid-template-areas: ”Text1 text2” ”Img. Contact”

The subgrid could just be one simple grid for example a photogallery. If there are more columns and pictures and text and lists to another page on the site i create a suitable grid and in that grid, if needed I nest even smaller grids in to that grid.

This keeps the css easier to understand and the big main grid is also pretty basic and not big at all in the css codeblock. You can now use smaller grids and nested grids with the same or similar grid area names. I alwas fo with grid-area-names. And you can now name your grid areas super specific to make it even easier to understand.

And yes the grid is picky and easy to mess up when growing in size so nested grids is the key. it is so much easier to understand and maintain and not mess up.

Good luck!

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Thank you, Kalle. Just last week, I began a nested grid exercise for a simple CSS animation at the top of a page. I'll keep working on it until it's right! :smile:

David

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Thanks for your response, Kalle.

So you've multiple classes for your "main" area each with it's own layout for Grid Template Areas, right? I suppose I never got thinking that I can have multiple grids in a design. :)

David Moorhead
David Moorhead
18,005 Points
David Moorhead
David Moorhead
18,005 Points

Hello, Jonathan Grieve, Kalle Jungstedt, my fellow champions of CSS Grid :smile:

Here's a talk by Jen Simmons at View Source 2018 presented by Mozilla on Youtube:

Everything You Know About Web Design Just Changed

In the video, Jen started with an historical overview beginning with the phase in 1995 of browser layout through the start and present-day Responsive phase inclusive of layout and graphic design. Beyond the Responsive, Jen suggested the phase of layout we're experiencing today be called:

Intrinsic Web Design : "intrinsic : belonging to the essential nature or constitution of a thing." Merriam-Webster Dictionary ["Intrinsic" is a word from one of the CSS specifications, in which "extrinsic" and "intrinsic" assume sizing principles.]

After the historical overview, Jen spent much time demonstrating technicals and tools used with CSS. Mozilla Hacks published the following Youtube paragraph on Oct 31, 2018:

2017 saw a sea change in web layout, one that few of us have truly come to grips with. We’re standing at the threshold of an entirely new era in digital design—one in which, rather than hacking layouts together, we can actually describe layouts directly. The benefits will touch everything from prototyping to custom art direction to responsive design. In this visionary talk, rooted in years of practical experience, Jen will show you how to understand what’s different, learn to think through multiple stages of flexibility, and let go of pixel constraints forever. (Emphasis mine.)

David

P.S. A :smile:, too, for Steven Parker.

Kalle Jungstedt
Kalle Jungstedt
4,709 Points
Kalle Jungstedt
Kalle Jungstedt
4,709 Points

Jonathan!

I work with different stylesheets for different pages of the site. They all have the same base style and layout for the header, footer etc and a main area wich is a empty grid called for example the "main_grid_wrapper". Inside the main_grid_wrapper that is empty, you can now customize the subrids for each and every page of your site inside the main_grid_wrapper.

Keep in mind to keep the main_grid_wrapper flexible. Meaning that it will expand and follow the grid inside it if the content expands.

I hope I explained that one good enough :)