Back-to-Basics: CSS Grid Definitions: Rows & Columns Only

Grid is a layout model in CSS that allows the control of sizing and positioning of boxes and their contents. Grid was developed around the idea of adapting to the space available, intelligently resizing elements within a webpage.

Defining a grid and placing its items:

• grid-template-columns and grid-template-rows only

to get your grid looking like this you'll need to set up you HTML appropriately and then define your grid:

• HTML:

    <div class="Grid">
    <div class="Item1"></div>
    <div class="Item2"></div>
    <div class="Item3"></div>
    </div>

• .Grid:

.Grid {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: 0.7fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr;
}
// I use grid-gap to give a defining space so that the content is easier to read.

Now that we have our grid defined, we need to place Item1, Item2and Item3 within the grid. For this, we will be going off Line reference of the columns and rows.

To place in a single row or column you just need to assign the starting line of the row or column. You'll see this withItem1's column assignment. To span multiple rows or columns you assign in this configuration starting line / ending line, you'll see this with Item1's row assignment as well as in Item2 and Item3's column assignments:

.Item1 {
    grid-column: 1;
    grid-row: 1 / 4;
}
.Item2 {
    grid-column: 2 / 4;
    grid-row: 1;
}
.Item3 {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
}

This is a super simple start to CSS Grid, only using the basics of grid-template-columns and grid-template-rows with item assignments of grid-column and grid-row.

Here's the pen:

Grid Definition using template Columns & Rows only by Ren Estep (@ren_estep) on CodePen.

At this point, you're probably like CSS Grid is awesome but Can I use it ?

Well, it's partially supported for IE11, but for safety sake, I highly suggest a polyfill.
(If you have a preferred polyfill post it in the comments)

Look for a follow-up on defining a grid using grid-template-areas & grid-area