CSS: Layout with Grids

Using CSS layouts with grids means rethinking the way we layout and organise information on our websites. CCS Grid is the first true two-dimensional layout tool that allows designers to tackle content layout as one whole cohesive piece instead of miscellaneous bits of content jammed together with no order or structure.

Designers are now working backwards from the outside in, starting with the grid, then placing our content within the columns and rows of that grid. This requires designers to think more carefully about the relationships and placement between different pieces of content, both from a communication and, layout and design perspective.

Let’s look at the CSS Grid’s features:

The first is that only direct first-level descendants of a grid container are grid items. This means that if you have descendants of those first-level descendants that you want to place in the grid, you will have to create a nested grid.

The second feature is that CSS Grid creates a true grid. This means that unlike ordinary CSS, CSS Grid works within strict lines and rows.

The third feature is content stacking. When you manually place items in a cell, the browser will allow you to place multiple items on top of one another in that same cell. The items are displayed in HTML source order, meaning that the further down in the HTML document an item is, the higher up in the stack it appears. You can manipulate this so that certain items appear while others stay hidden.

The fourth feature is content ordering. Because you have the ability to place any piece of content in any section of the grid you can easily visually change the order of your content without changing HTML markup structure.

Once you’ve completed your HTML, you have almost full freedom with creating layouts using the grid as it is purely visual. You can turn grids on and off or change their columns, rows, grid areas or anything else at anytime. 

CSS Grid gives designers a new and dynamic interface that challenges the way you might think about layouts and web design!

Since CSS Grids can be confusing to get the hang of this tutorial helps explain the basics of using a grid:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: