Comments on Practical CSS Grid: Adding Grid to an Existing Design

24 Reader Comments

Back to the Article
  1. Technically, you can use body::before and body::after to style up to two grid cells independently of any grid items ;) It’s a hack, though.

    Copy & paste the code below to embed this comment.
  2. Would just `auto` instead of `min-content` work? It seems so. If I’m reading the spec correctly, `min-content` always computes to `auto` on the block axis.

    Copy & paste the code below to embed this comment.
  3. Thanks for this article! This article is really easy to follow and understand, I’m looking forward to starting playing with CSS grids :)
    In #snippet7 should it be “grid-template-columns: [left] 1fr [middle] 20em [right];” instead of “grid-template-columns: [left] 1fr [middle] 20em [end];”?

    Copy & paste the code below to embed this comment.
  4. So, to put a box around the “extra” sidebar, you’d just position a ::before element into that grid cell and style it, e.g.

    body::before {
      content: ‘’;
     
      /* selecting the cell */
      grid-row: 3;
      grid-column: 2;

      /* styling the cell */
      background-color: yellow;
      border: 3px solid red;
    }

    And these styles would be applied to the cell regardless of whether or not you’ve placed any element(s) into the cell. You could regard these styles as part of the grid layout itself. Probably a bad idea, though.

    Copy & paste the code below to embed this comment.
  5. In snippet 5, why is the #search block needed? After #sitemast spans the top row and #navigate is put in row 2 col 1, wouldn’t #search just end up in row 2 col 2 by itself anyway?

    Copy & paste the code below to embed this comment.
  6. Thanks for this article Eric! It is a masterclass in CSS grids.

    Copy & paste the code below to embed this comment.
  7. Hi Eric,
    This is the gold mine on CSS grid for me. Thanks for Sharing your informative and useful knowledge.
    Regard
    Prajwol

    Copy & paste the code below to embed this comment.
  8. This Css grid is definitely something I was looking for. Definitely going to try it for our new project. Great work Eric

    Copy & paste the code below to embed this comment.
  9. Eric, Liked your part about keeping it dry with minimal explicit definitions.  Didn’t know about implicit auto flow, so this scored big for me.  You also got me thinking. Does “auto” mean the same as “min-content”?  I’ll be checking that. I’ve been laying out via the ascii art method specifying auto for height on the right side of the block (easiest for beginners).  Got your book on the radar. Best.

    Copy & paste the code below to embed this comment.
  10. I am still uncomfortable using CSS Grid, unless your demographic are bleeding edge users, it still feels like a long ways off until we comfortably use CSS Grid on a site with any significant amount of users

    Copy & paste the code below to embed this comment.
  11. Eric - Excellent write-up. I’ve looked over many and while it may be just an introduction, it was superbly written; easy to follow and understand. That’s something so many people get wrong when putting these things together, intro or advanced.

    Regarding TraderJoe’s comment, I’m in the same boat IF Chrome and Safari latest both support CSS Grid on mobile devices. I haven’t dug in too much on the issue, not enough to catch news or anything, so it may be. But I serve more than 150,000 pages each month to mobile devices. That makes it the deal-breaker for me in real-world use.

    Even still, going to update a project I’m tinkering with for the sake of tinkering to play with Grid (and some Flexbox too)!

    Thanks!

    Copy & paste the code below to embed this comment.
  12. interesting… thanks for sharing and clearing up in your comments on auto and min-content… most useful

    Copy & paste the code below to embed this comment.
  13. Very interesting article, thank you!

    Copy & paste the code below to embed this comment.
  14. The useful instructions are free, I think it will be simple with the beginners.

    Copy & paste the code below to embed this comment.
  15. I think the points you shared is too good and helpful for me. thank you sir

    Copy & paste the code below to embed this comment.