Great news - CSS Grid Builder 2.5 build 254 is now available!


Wow, this is sooo exciting. It means you can use CSS Grid for live (production) sites and pages today! This build includes support for Features queries. These are used for 'asking' a browser if it supports something. If the answer is yes, certain (modern) style instructions can be given.



Here is a quick rundown on how these work by Bob “the CSS Grid Builder”:

• I tend to create 'views' (comparable to pages in a magazine). Each container represents a view — I usually call them sections, some with a specific (class) name like 'hero-section. Frequently I make these section a certain minimum height of the screen using the vh unit.
• Then I put together a very simple, mainly stacked, mobile-1st view WITHOUT using the Feature Query. This view will then also be presented on IE11.
• I proceed with adding very basic design styles such as colors and typography etc.
• Then, and only then I add the Grid feature query. I enhance the layout design over the various breakpoints for browsers that support is (all the major browsers do). I also (try to) make sure to not add styles that I would like the IE11 peeps to see too.
• Following that I switch to Feature query view mode, but write to the Fallback stylesheet. The image above shows that setting. In this mode I add more design styles that will be presented for everyone. At that point the design is done for IE11.
• I switch again to the CSS Grid Feature Query (the styles will now be written to the FQ and only be interpreted by browser that understand display: grid) and enhance the layout and design where appropriate.
• Done!

A video demonstration will be coming soon! Check out a few videos to help you get started at: https://cssgrid.cc/video-tutorials/

We also added 2 more levels of nesting for the list containers. Updated overlay when selecting styles so that, when it is focused, the label will be visible. This means that the element dropdown selector will no appear to be empty when you toggle it. And we tweaked the Hover state to allow for custom styles. Along with all of that, we pushed through a bunch of backend goodness.

Enjoy!