Comments on: CSS Grid Starter Layouts

By: Mo Jack

Mo Jack — Sun, 02 Jun 2024 16:21:31 +0000

Thanks. Used this in my website which is hosted on digitalocean also.

By: Geoff Graham

Geoff Graham — Thu, 03 Dec 2020 16:15:16 +0000

In reply to Richard Hill. 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.

By: Richard Hill

Richard Hill — Thu, 03 Dec 2020 13:18:59 +0000

In reply to Shaun Levett. Am I just stupid or could you not just use a combination of min(), max() and clamp() to set limits on your font-sizes?

By: Geoff Graham

Geoff Graham — Thu, 24 Sep 2020 14:42:42 +0000

In reply to Bart Calixto. Clever!

By: Bart Calixto

Bart Calixto — Thu, 24 Sep 2020 08:15:49 +0000

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)));
}

By: Arsalan Gazor

Arsalan Gazor — Wed, 22 Jul 2020 04:58:02 +0000

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. ♥️

By: Geoff Graham

Geoff Graham — Thu, 12 Dec 2019 15:28:59 +0000

In reply to Luke. Hey Luke! I wish I could take credit for the Monthly Mixup layout but that's all Chris. :) Looks like it starts becoming a grid at the 800px breakpoint, which is set on the parent element. It's actually set up as a six-column grid (grid-template-columns: repeat(6, 1fr);) and then all the children are placed along the columns (e.g. grid-column: 1 / 2 for the first grid column) and on the implicit rows that grid creates (e.g. grid-column: 2 / 3 for the second row). That way, there's no real need for breakpoints! The grid handles the spacing and placement from a breakpoint of 800px and up.

By: Luke

Luke — Thu, 12 Dec 2019 02:43:17 +0000

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!!

By: Nahid Estes

Nahid Estes — Mon, 05 Aug 2019 02:33:20 +0000

Thank You so much!

By: Abhay Singh

Abhay Singh — Fri, 25 Jan 2019 20:07:20 +0000

Calander is beautiful.

By: Julia

Julia — Tue, 23 Oct 2018 20:19:57 +0000

Nice compilation. Thanks!

By: Gokul G

Gokul G — Fri, 10 Aug 2018 05:51:24 +0000

This is a very useful article for beginners like me.

Thanks Geoff Graham

By: Geoff Graham

Geoff Graham — Sat, 07 Apr 2018 14:44:47 +0000

In reply to Anton.

Hmm, not sure what might be going on there. Do you have a demo? A full background color should be possible with any layout, regardless of whether it is fixed or not: https://codepen.io/geoffgraham/pen/PRxEEd

By: Anton

Anton — Sat, 07 Apr 2018 09:25:05 +0000

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.

By: Dave Cruickshank

Dave Cruickshank — Tue, 23 Jan 2018 18:35:09 +0000

In reply to Vanderson.

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?