fbpx

CSS Grid

This article is in-progress. We’re trying to stay on-top of grid layout and make sure we have some information about it. But know that grid is extremely new, not well supported, and in-flux in browserland still.

The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren’t really designed for page layout.

You start by establishing a grid context on an element:

.area {
  display: -ms-grid; /* prefix for IE 10 */
  display: grid; /* or inline-grid */
}

Then you define what that grid layout will be like. Think columns and rows like a spreadsheet (or table). Then, you can define for each child a column and a row (resulting in a cell). No markup changing is involved; everything is done through CSS.

Along with the fact this method fixes the issues we encounter with older layout techniques, its main benefit is you can display a page in a way which can differ from the flow order.

Properties

The `fr` Unit

The fr unit can be used for grid-rows and grid-columns values. It stands for“fraction of available space”. Think of it as percentages for available space when you’ve taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all ‘length’ or content-based row and column sizes have reached their maximum.

Coming Soon

The properties listed so far are the very basics to use the grid layout; they are also the first (and currently only) properties to be supported in this module.

According to the official specifications, there are a lot more involved including:

  • grid-template: allows grid definition through a template of identifiers
  • grid-column-position: current grid-column since grid-column is supposed to be a shorthand for grid-column-position and grid-column-span
  • grid-row-position: same as above
  • grid-position: shorthand for grid-column-position and grid-row-position
  • grid-span: shorthand for grid-column-span and grid-row-span
  • grid-area: shorthand for grid-column-position, grid-row-position,grid-column-span and grid-row-span
  • grid-auto-columns: change default size for columns
  • grid-auto-rows: change default size for rows
  • grid-auto-flow: allows grid-items to automatically flow in available cells

Unfortunately, these properties are currently unsupported. I’m going to update this article over time to document and include examples.

Simple vertical centering with CSS

placing-div-vertically-center-inside-another-div

Below is an example to show how I positioned a DIV inside another div to make it vertically center.

Creating Simple HTML and place our element inside a holder

 

HTML:

<div class="holder">
    <div class="v-center">
        This is my element placed in the center of another div
    </div>
</div>

CSS

.holder {
    margin-top:50px;
    padding:20px 5px;
    height:200px;
}
.v-center {
    text-align:center;
    position:relative;
    top:50%;
    transform: translateY(-50%);
}
 

Vmin and Vmax

While vh and vm are always related to the viewport height and width, respectively,vmin and vmax are related to the maximum or minimum of those widths and heights, depending on which is smaller and larger. For example, if the browser was set to 1100px wide and the 700px tall, 1vmin would be 7px and 1vmax would be 11px. However, if the width was set to 800px and the height set to 1080px, vminwould be equal to 8px while vmax would be set to 10.8px.

So, when might you use these values?

Imagine you need an element that is always visible on screen. Using a height and width set to a vmin value below 100 would enable this. For example, a square element that always touches at least two sides of the screen might be defined like this:

.box {
height: 100vmin;
width: 100vmin;
}

vmin

If you needed a square box that always covers the visible viewport (touching all four sides of the screen at all times), use the same rules except with vmax.

.box {
height: 100vmax;
width: 100vmax;
}

vmax

Combinations of these rules provide a very flexible way of utilizing the size of your viewport in new and exciting ways.