1.2: Grids

There is more to grids than flexbox, so let's pause here to learn more about grids.

Along with containers(parents) and items(children), grids have cells, tracks and areas.

Cell: one(1) unit

Track: range bordered by two(2) lines

Area: range bordered by four(4) lines

grid specs

Grid Components

Property	Value
grid-template-columns	fr
grid-template-rows	auto
grid-template-areas	repeat
grid-area	minmax

Using grid-templates allows developer to, not only have consistency between sections and pages or their site, but also allows more precise placement of items that will function as you want them to do even with a change in viewport size. Additionally, it allows for easier item placement when using order and media queries.

Grid columns and rows can be delineated by

Numbered lines

.

numbered lines

Below are layout examples using all three methods.

When defining a grid it is essential that you define the box size. (asterisk(*) represents "universal" and will apply to all)

*{box-sizing: border-box;}

Numbered lines

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {box-sizing: border-box;}

.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgba(0,128,128,1.0);
  border-radius: 5px;
  background-color: rgba(0,128,128,.7);
  padding: 1em;
  color: #ffffff;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

numbered lines

Named lines

With some minor adjustments, using grid-column/row-start/end, the above CSS could be written as

.wrapper {
  display: grid;
  grid-template-columns:
    [grid-start] 1fr
    [main-start] 1fr
    [main-end] 1fr
    [grid-end];
  grid-template-rows
    [grid-start] 100px
    [main-start] 100px
    [main-end] 100px
    [grid-end] 100px;
}

.one {
  grid-column-start: grid-start;
  grid-column-end: main-end;
    /*or grid-column: grid-start / main-end; */
  grid-row-start: grid-start;
  grid-row-end: main-start;
    /*or grid-row: grid-start; */
}

.two {
  grid-column-start: main-start;
  grid-column-end: grid-end;
    /*OR grid-column: main-start / grid-end; */
  grid-row-start: grid-start;
  grid-row-end: main-end;
    /*OR grid-row: grid-start / main-end; */
}

.three {
  grid-column-start: grid-start;
    /*OR grid-column: grid-start; */

  grid-row-start: main-start;
  grid-row-end: grid-end;
    /*OR grid-row: main-start / grid-end; */
}

.four {
  grid-column-start: main-end;
    /*OR grid-column: main-end; */

  grid-row-start: main-end;
    /*OR grid-row: main-end; */

}

.five {
  grid-column-start: main-start;
     /*OR grid-column: main-start; */

  grid-row-end: grid-end;
    /*OR grid-row: grid-end; */
}

.six {
  grid-column-start: main-end;
    /*OR grid-column: main-end; */

  grid-row-end: grid-end;
    /*OR grid-row: grid-end; */
}

Grid

* {box-sizing: border-box;}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgba(0,0,0,1.0);
  background-color: rgba(0,128,128,.3);
  padding: 1em;
  color: white;
}

.wrapper {
  display: grid;
  grid-template-columns:
    [grid-start] 2fr
    [main-start] 2fr
    [main-end] 2fr
    [grid-end];
  grid-template-rows:
    [grid-start] 100px
    [main-start] 100px
    [main-end] 100px
    [grid-end];
  border: 3px solid ;
}

.box {
  border: 2px solid black;
}

.one {
  grid-column-start: grid-start;
  grid-column-end: grid-end;

  grid-row-start: grid-start;
  grid-row-end: main-start;
}

.two {
  grid-column-start: grid-start;
  grid-column-end: grid-end;

  grid-row-start: main-start;
  grid-row-end: main-end;
}

.three{
  grid-column-start: grid-start;
  grid-column-end: grid-end;

  grid-row-start: main-end;
  grid-row-end: grid-end;
}

.four {
  grid-column-start: grid-start;
  grid-column-end: main-start;

  grid-row-start: grid-start;
  grid-row-end: grid-end;

}

.five {
  grid-column-start: main-start;
  grid-column-end: main-start;

  grid-row-start: grid-start;
  grid-row-end: grid-end;
}

.six {
  grid-column-start: main-end;
  grid-column-end: grid-end;

  grid-row-start: grid-start;
  grid-row-end: grid-end;
}

Named areas

Look closely at where the columns and rows layout.

.header {
    grid-area: hd;
}

.sidebar {
    grid-area: sd;
}

.main {
    grid-area: content;
}

.footer {
    grid-area: ft;
}

.wrapper {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd content"
". . . ft ft ft ft ft";
}

grid layout

NOTE:

"." is used as a placeholder. Instead of the footer spanning the entire width, it only occupies three(3) of the nine(9) columns that we designated in our template.

 <h2>Grid centered Item w/content<h2>
 <div class="wrapper">GRID
  <div class="wrap">
    <div><h4>CHILD</h4>
    <div class="content a"> <h6>CONTENT<h6></div>
  </div>
    </div>
</div>
  </div>

EXPLORE MORE

We will be using one(1) container with three(3) columns and two(2) rows to look at the capabilities of the grid system.

In section 1.1 we saw a container with five(5) items within a container comprised of one(1) column and five(5) rows.

Value focus: span, relative and absolute values,

<h2>Grid Span</h2>
<div class="wrapper">
  <div class="track">One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper{
display: grid;
grid-template-columns: 200px 200px 200px;
border: 2px solid rgb(0,128,128);
border-radius: 5px;
text-align: center;
}

.wrapper > div {
border: 2px solid rgb(0,128,128);
border-radius: 5px;
background-color: rgba(0,128,128,0.3);
padding: 1em;
color: #FFF;
}

.track {
    grid-column: 1;
    grid-row: span 2;
}

span

We covered lengths at the beginning of the section. Columns and rows can use relative or absolute lengths. Above we see that the grid columns are set to an absolute length of 200px and rows set to auto.

columns/rows can be set the following ways:

• 200px 200px 200px

• 1fr 1fr 1fr ( is the same as repeat(3, 1fr) )

• 1fr 1fr 200px

• 20px 1fr 200px

• 2fr 1fr 1fr

• 1fr auto 10%

Challenges

Write code for the following grids

fr unit

mixed values

fr repeat