What is the CSS Grid Layout Module?

According to the W3C Working Draft, The CSS Grid Layout module “defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout module, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.”

In Plain English, CSS Grid lets us draw a grid inside any container and place content wherever you want within that grid, independent of the current semantic structure. In short, CSS Grid gives us the power of classic print-based grid layout systems with the flexibility of responsive web design.

When can we start using CSS Grid?

The short answer is, “Not yet but soon”. Checkout Can I use CSS Grid?

• Originally proposed by Microsoft in April 2011 and has been available in Internet Explorer 10/11 and Edge 12/13/14 (old spec)
• Chrome (with experimental feature enabled)
• Firefox (with experimental feature enabled)

CSS Grid: The Basics

CSS Grid Terminology

Grid

• Any element with its display property set to grid
• Grids have rows and columns

Grid Line

• A Grid Line is the line that makes up the grid.  They can be horizontal or vertical or can be referred to by number or name.
• The column lines are counted based on the direction of the defined language. So if a page is set to left to right language, the count is left to right for column lines. If the language is right to left the count is from right to left as well.

Grid Track

• A Grid Track is the space between two grid lines. The grid tracks can be either horizontal or vertical representing rows or columns.

Grid Cell

• A Grid Cell is the space between four grid lines top, right, bottom and left.

Grid Area

• A Grid Area is any area within the grid defined by its four outermost grid lines. A grid area may cover multiple lines and contain multiple cells.

Grid Gutters

• Grid Gutters are the defined space between rows and columns.
• Upcoming feature not currently supported in browsers.

How to use the experimental CSS Grid features in Chrome

Because the CSS Grid layout module is an experimental module still in working draft, there is no support for this feature in normal browsers. Support for CSS Grid can be enabled in Chrome and Firefox from the backend. To turn CSS Grid support on in Chrome, first open the browser and then, visit the following URL, chrome://flags. Search for web platform and you will find Enable Experimental Web Platform Features, which include CSS Grid.

Flexbox is a set of CSS properties that gives us a flexible way to lay out content. It is one of the advanced methods for laying out webpages. With flexbox we can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. We can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

Flexbox Basics and Terminology

• The two most important elements in flexbox layout are flex containers and flex items.
• The flex container sets the context for flexbox layout; it contains flex items, the actual elements you layout using flexbox. The flex container can be any block-level or inline element.
• Every direct child of a flex container is called a flex item; there can be any number of flex items inside a flex container.
• Once the children are flex items, one can take advantage of flexbox’s powerful alignment properties.
• Flexbox follows two axes that determine the layout direction of flex items: main axis and cross axis.
• The main axis is the primary axis along which flex items are laid out; it defines the direction of flex items in the flex container.
• The cross axis runs perpendicular to the main axis.
• Each axis has a start side and an end side.
• The default main-start and main-end direction of the main axis is left-to-right.
• The default direction of the cross axis is top-to-bottom.

Creating a Flex Container

• Before you can use any flexbox property, you need to define a flex container in your layout.
• You create a flex container by setting the display property of an element to one of the flexbox layout values: flex or inline-flex.
• By default, flex items are laid out horizontally on the main axis from left to right.
• By default, flex items stretch to fill the flex container’s height.
• display: flex; creates a block-level flex container.
• display:inline-flex; creates an inline flex container.
• Any element outside a flex container is not affected by the flexbox layout.
• Only children of a flex container automatically become flex items.

Controlling the Direction of Flex Items

• Some flexbox properties apply to the flex container only, while some apply only to the flex items.
• The flex-direction property applies to the flex container only.
• The default value for flex-direction is row.
• To reverse the direction of flex items in a row, use the value row-reverse.
• The value column rotates the main axis so that flex items are laid out vertically.
• Like the row-reverse property, you can swap the top-to-bottom direction of a column with the value column-reverse.

Wrapping Flex Items

• The flex container lays out flex items on a single line called a flex line.
• The flex-wrap property is for flex containers only.
• The flex container tries to fit all items on one flex line, even if it causes its content to overflow.
• The flex container can break flex items into multiple flex lines and allow them to wrap as needed.
• With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.
• The value wrap breaks the flex items into multiple lines.

Distributing Space Inside a Flex Container

• You apply the justify-content property to flex containers only.
• The justify-content property lets you control the position and alignment of flex items on the main axis and how space should be distributed in a flex container.
• The default value for justify-content is flex-start, which places items towards the start of each flex line.
• To place items at the end of the flex line, set justify-content to flex-end.
• The value center places flex items in the center of the line, with equal amounts of empty space between the line’s start edge and the first item.
• The value space-between displays equal spacing between flex items.
• For equal spacing around every flex item, use the value space-around.
• A margin set to auto will absorb any extra space around a flex item and push other flex items into different positions.

Changing the Order of Flex Items

• The order property applies to flex items only.
• We can use the order property to change the order of any flex item.
• You can structure an HTML document for SEO or accessibility first, then rearrange the content without ever editing the HTML.
• The default order of all flex items is 0.
• order places flex items relative to the other items’ order values.
• To place a flex item before another item, it needs to have a lower order value than the item.
• To place a flex item after another item, it needs to have a higher order value than the item.

Growing Flex Items

• The flex-grow property applies to flex items only.
• flex-grow determines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.
• A flex-grow value of 1 expands flex items to take up the full space of a line.
• The higher the flex-grow value, the more an item grows relative to the other items.

Smarter Layouts with flex-basis and flex

• flex and flex-basis apply to flex items only.
• flex-basis specifies the initial main size of a flex item.
• You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according to that size.
• When setting the flex-grow and flex-basis value of a flex item, it’s recommended that you use the flex shorthand property.
• flex is the shorthand for flex-grow, flex-basis and a less commonly used flex-shrink property.
• Using only one number value for flex sets the flex-grow value of an item.
• The second and third values are optional in the flex shorthand.
• Setting only one number value for flex automatically sets the flex-basis value to 0.

Aligning Flex Items on the Cross Axis

• The align-items property applies to flex containers only.
• The align-self property applies to flex items only.
• align-items aligns flex items vertically in the flex container.
• To align all flex items to the start of the cross axis, use the align-items: flex-start;
• align-items: flex-end; packs the items toward the end of the cross axis
• align-items: center; perfectly centers the items along the cross axis
• align-self: flex-start; aligns a flex item to the start of the cross axis
• align-self: flex-end; aligns a flex item to the end of the cross axis
• align-self: center; aligns a flex item to the center of the cross axis

Vertical and Horizontal Centering

Centering content is one of the trickiest and most difficult things to do in CSS layout. Even vertical centering and centering elements perfectly inside fluid containers is tricky/difficult when using layout properties like float, display, or position. Flexbox is the smartest solution when it comes to centering content.

Three ways to center-align elements using flexbox

1. Set the flex container’s justify-content and align-items values to center:

   
.container{
justify-content: center;
align-items: center;
}


2. Set the flex container’s justify-content value to center, while setting the flex item’s align-self value to center:

   
.container{
justify-content: center;
}
.item{
align-self: center;
}


3. Set the flex item’s margin value to auto:

   
.item{
margin:auto;
}


Resources

•    A Complete Guide to Flexbox – https://css-tricks.com/snippets/css/a-guide-to-flexbox/
•    A Visual Guide to CSS3 Flexbox Properties – https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
•    Flexbox Playground – https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
•    Flexbox – latest browser support – http://caniuse.com/#search=flexbox