Back-to-Basics: CSS Grid Definitions: Rows & Columns Only
Tags: css, cssgrid, tutorial, beginners
Published: 2020-04-06 02:32:44


|Grid Defs|   |
|---|---|
|Rows & Columns Only|[(☞ﾟヮﾟ)☞You Are Here](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-rows-columns-only-2757)|
|Grid Template Areas|[Back-to-Basics: CSS Grid Definitions: grid-template-areas](https://dev.to/stories_of_ren/back-to-basics-css-grid-definitions-grid-template-area-17m8)|
|Grid Short Hand|[Back-to-Basics: CSS Grid Declarations: Shorthand](https://dev.to/stories_of_ren/back-to-basics-css-grid-declarations-shorthand-gfp)|

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__


![preview of grid](https://dev-to-uploads.s3.amazonaws.com/i/nhuxm2wbzv8yy2tf3d3r.PNG)

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

- __HTML:__
``` HTML
    <div class="Grid">
	<div class="Item1"></div>
	<div class="Item2"></div>
	<div class="Item3"></div>
    </div>
```

- __.Grid:__

``` CSS
.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`, `Item2`and `Item3` within the grid.  For this, we will be going off Line reference of the columns and rows.  

![line references](https://dev-to-uploads.s3.amazonaws.com/i/90u5eu32zw41ndvtw2pd.png)

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 with`Item1`'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:
 
``` CSS
.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:
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="ren_estep" data-slug-hash="PoqrdXj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Grid Definition using template Columns &amp;amp; Row only">
  <span><a href="https://codepen.io/ren_estep/pen/PoqrdXj">
  Grid Definition using template Columns &amp; Rows only</a> by Ren Estep (<a href="https://codepen.io/ren_estep">@ren_estep</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

At this point, you're probably like CSS Grid is awesome but [Can I use it ?](https://caniuse.com/#search=css%20grid)
![Can I use CSS Grid](https://dev-to-uploads.s3.amazonaws.com/i/o9gjy4y21ueohzmhuw4o.png)
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`