CSS Grid Starter Layouts | CSS-Tricks (original) (raw)

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Excellent………..I fall in love with CSS Grid
  2. This is absolutely brilliant. Thank you for this. I’ve been using grid for about 6 months now, but only in the most basic use cases and very complicated ones. These are great examples to demonstrate some of the more obscure, but incredibly useful features of grid.
    I have to admit, it took me a few month to get over my infatuation with flexbox to really warm up to grid, but it was worth it. (where grid replaces flexbox perfectly of course)
    • *”…and very _few_ complicated ones.” (stupid typing faster than I can think)
    • Heck yeah, thanks Vanderson! Glad you’re finding these useful and I love hearing that you’re warming up to Grid. It’s a real interesting and exciting time in CSS for sure.

      (where grid replaces flexbox perfectly of course)
      Yeah, that’s the rub. Flexbox is still fantastic for one-dimensional layouts (either column or row) and Grid is the bomb for anything two-dimensional (column and row).

    • I am very interested in CSS Grid as well, and see that you’re using it. Have you found any troubles with browser incompatibility? Because we’re still in transition between the OLD way (Flexbox/bootstrap) and the NEW way (CSS Grid all the way, baby!) I’ve been hesitant to use it due to browser difficulties (and especially mobile browser adoption).
      How have your experiences been?
  3. The thing that confuses me about all these example Grid layouts is that the rows are almost always set in physical amounts (px,vh etc), which doesn’t make sense to me, as the rows would obviously need to expand to fit content like a normal web page (I believe grid will not expand row height unless stated). I know you can easily remedy this and use ‘auto’ for the row size, but it’s not often used in these examples.
    It’s like fixed height boxes from the bad old days. Basically, practical examples would be better than fixed size ones :)
    I realise this is a small niggle though
    • I did some tinkering in the codepens and I suspect the heights are there so the examples look good and easy to read in this article in small spaces.
      I agree, I’d never* use a forced height on something like this. Especially with responsive design requirements would make a mess of that.
      *Of course there are always those edge use cases. :P

    • It’s like fixed height boxes from the bad old days. Basically, practical examples would be better than fixed size ones :)
      Oh yeah, for sure. Everything here is purely for the sake of example because otherwise there would be no content to display to illustrate the concepts.
      To reiterate the opening:
      The idea here is to show off what the technique is capable of doing and provide a starting point that can be re-purposed for other projects.

    • Am I just stupid or could you not just use a combination of min(), max() and clamp() to set limits on your font-sizes?
    • You totally can! This post was originally written before those functions were widely supported. There’s much more on how that works in this post.
  4. Useful. Thanks for the layouts Mr. Graham.
  5. Thanks for the article and templates. CSS Grid is becoming my goto for almost all my projects.
  6. Very helpful, thanks!
    I am also curious where I can find more info on the calculations you created for responsive font-size? :)
    • Hey Stephanie! So glad these starter templates have been helpful. :)
      Here’s a full write-up on the fluid typography used in these demos:

      Fluid Typography

    • Of course, add away! Take anything you find useful. :)
  8. Your breakout has a rule for a fogure element but I don’t see it in the markup… Typo?
    • That is indeed a bonafide typo. Thanks for the heads up!
  9. Very good. But I have a question: Why not just use a simple table to create a calendar?
    • You most certainly could! There’s often multiple ways to accomplish the same thing and table is a legit way. But this is a collection of Grid examples, not tables. :)
  10. Awesome stuff! Thanks Geoff :)
  11. I´m a web developer in training(almost done).
    I started to try grid yesterday morning, by they end of the day I only used grid. Much easier and more intuitive. I´m primarily going to use grid, because of you and one other site.
  12. I started to use grid but i can’t seem to find out how to do a full width background color to a fixed layout.
  1. This is a very useful article for beginners like me.
    Thanks Geoff Graham
  2. Nice compilation. Thanks!
  3. Hi Geoff! I have been struggling with the grid over the last week. I have been observing the monthly mixup grid layout very closely but couldn’t figure out how you keep the relation between the row height and column width (or is it that you use breakpoints?). I mean I know that you certainly HAVE set some breakpoints but there’s still something professional I don’t understand. Can you help me please? I want something nice like yours in my website. Thanks!!
  1. What you have written here Geoff Graham is ABSOLUTELY PRICELESS. I cannot believe how this article is just existing for free here! It is SO valuable! It’s like a dream come true for the perfectionist Jr. Developer types… like me. Anyway, I just wanted to THANK YOU from the bottom of my heart for crafting this beauty here. ♥️
  2. you can use :first-letter pseudo element to style responsive calendar, while keeping the title=”Sunday” so on mouse over you see the whole calendar day.
    ul.weekdays li abbr:first-letter {
    font-size:calc(16px + (26 – 16) * ((100vw – 300px) / (1600 – 300)));
    }
  3. Thanks. Used this in my website which is hosted on digitalocean also.