CSS3 Grid Layouts

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

CSS3 Grid Layouts

The CSS grid layout gives developers the ability to create a layout similar to when the Web was built with tables. Yet because this is done with CSS and not with HTML this allows many more possibilities such as having the grid respond with media queries, or alter it as needed without having to muck about in the html. It offers separation between html elements and their on-screen render. Elements in a CSS grid can do many things a table-based layout could not, such as the layering of elements.

To declare an element as a grind is simple. It’s simply a new value for the ‘display’ property. E.g:


.content {
 display: grid;
}

The next bit is to set what the grid looks like, with support for near anything, from simple 2-3 column layouts, to full-on 16 column ones.
An example;


.content {
 grid-template-coumns: 100px 10px 100px 10px 100px;
}

This will create a grid of three with 10px gutters. Next up, the rows;


.content {
 grid-template-rows: auto 5px auto;
}

This creates three rows, one auto height, a 5px gutter and then another with height auto.

We can then set the position of elements, which is where things start to get really crazy. Some good examples can be found here: http://gridbyexample.com/examples/#example1

It’s all in development right now, but it is coming and it’s pretty cool. If you want to play around with the future of the web, it’s currently limited to Chrome with the ‘experimental web platform features’ enabled. It’s also in IE versions 10 and up.
Cheers,

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Let’s Get Started!

COVID-19 Message

NetGain remains open during the pandemic.  Our team is working safely from home to help our clients through this unprecedented event.

As digital marketers, we are treating this interruption as a unique opportunity to help our clients stay active online and improve their web presence.  Together, we can transform a challenging situation into limitless opportunity.