CSS Dev Conf 2017

The possibilities of CSS Grid Layout

Back in October, I once more attended CSS Dev Conf, held at Hotel Monteleone in New Orleans – under the shadow of hurricane Nate. Lucky for us, it shifted last minute towards Mississippi. National Guard members, who were all over downtown and ready to
fight Nate (I guess), went home packing.

After spending four days there, my personal highlights were:

Parading the streets of the French Quarter with all the attendees and lead by a real New Orleans Jazz marching band. You get such a good vibe out of this.

Taking part of a guided tour of the French Quarter and to get to know more about New Orleans rich history.

Bourbon Street (and I'll stop here).

CSS Grid on everyone's lips

With CSS Grid Layout specs being shipped into browsers since last spring, it is pretty clear now that developers are starting to turn their back on floats and Flexbox to fuel their layout system.

Floats for instance have been used for the longest time to position elements horizontally within a container and in relation with its preceding siblings. The basic example for a 2-column layout would be:

Now let's do that with CSS Grid:

Neat, right? A lot less boilerplate to mitigate floats impact on the outer element. This example is just the tip of the iceberg of all the possibilities offered by Grid Layout. In a more
concise way, its newly introduced properties give a more control over the child positioning -- both vertical and horizontal. In my opinion, this greatly reduces the need for a third-party framework when it comes page layout.

Lately I was tasked to redo the news page for our client Juno Beach Centre. The requirement for the index page was that certain posts needed more emphasis than others. So our designer Véronique came up with this layout where posts marked as important
were doubled in size...width and height-wise. Here was my first opportunity to take what I've learned at the conference for a spin.