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 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
.
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;
}
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";
}
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;
}
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
Last updated