CSS Grid Layout - Lena Design

The CSS Grid Layout makes it easier to design web pages without having to use floats and positioning.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.item-1 { grid-area: header; }
.item-2 { grid-area: menu; }
.item-3 { grid-area: main; }
.item-4 { grid-area: side; }
.item-5 { grid-area: footer; }

.grid-container1 {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'menu main main main side side'
  'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container1">
  <div class="item-1">Header</div>
  <div class="item-2">Menu</div>
  <div class="item-3">Main</div>  
  <div class="item-4">Side</div>
  <div class="item-5">Footer</div>
</div>

</body>
</html>

Output:

Header

Main

Side

Footer

The CSS grid layout contains a parent element (container), with one or more child elements:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}
.grid-item {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Output:

To create an HTML grid container set display property value to grid or inline-gird:

display: grid;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}
.grid-item {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Output:

display: inline-grid;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-item1 {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container1">
  <div class="grid-item1">1</div>
  <div class="grid-item1">2</div>
  <div class="grid-item1">3</div>  
  <div class="grid-item1">4</div>
  <div class="grid-item1">5</div>
  <div class="grid-item1">6</div>  
  <div class="grid-item1">7</div>
  <div class="grid-item1">8</div>
  <div class="grid-item1">9</div>  
</div>

</body>
</html>

Output:

Grid columns and rows:

The vertical lines of grid items are columns, and the horizontal lines of grid items are rows:

The spaces between each column/row are gaps:

To adjust the gap size use the following properties:

Example (column-gap):

<!DOCTYPE html>
<html>
<head>
<style>
.gridContainer {
  display: grid;
  column-gap: 40px;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}

.gridItem {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gridContainer">
  <div class="gridItem">1</div>
  <div class="gridItem">2</div>
  <div class="gridItem">3</div>  
  <div class="gridItem">4</div>
  <div class="gridItem">5</div>
  <div class="gridItem">6</div>  
  <div class="gridItem">7</div>
  <div class="gridItem">8</div>
  <div class="gridItem">9</div>  
</div>

</body>
</html>

Output:

Example (row-gap):

<!DOCTYPE html>
<html>
<head>
<style>
.gridContainer1 {
  display: grid;
  row-gap: 40px;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}

.gridItem1 {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gridContainer1">
  <div class="gridItem1">1</div>
  <div class="gridItem1">2</div>
  <div class="gridItem1">3</div>  
  <div class="gridItem1">4</div>
  <div class="gridItem1">5</div>
  <div class="gridItem1">6</div>  
  <div class="gridItem1">7</div>
  <div class="gridItem1">8</div>
  <div class="gridItem1">9</div>  
</div>

</body>
</html>

Output:

Example (gap):

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container2 {
  display: grid;
  gap: 50px 70px;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-item2 {
  background-color: #f4a261;
  border: 1px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container2">
  <div class="grid-item2">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item2">3</div>  
  <div class="grid-item2">4</div>
  <div class="grid-item2">5</div>
  <div class="grid-item2">6</div>  
  <div class="grid-item2">7</div>
  <div class="grid-item2">8</div>
  <div class="grid-item2">9</div>  
</div>

</body>
</html>

Output:

Grid lines

The lines between columns are column lines, and the lines between rows are row lines.

Example:

Place a grid item at column line 1, and let it end on column line 3:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container3 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container3 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.itemOne {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<div class="grid-container3">
  <div class="itemOne">1</div>
  <div class="itemTwo">2</div>
  <div class="itemThree">3</div>  
  <div class="itemFour">4</div>
  <div class="itemFive">5</div>
  <div class="itemSix">6</div>
  <div class="itemSeven">7</div>
  <div class="itemEight">8</div>  
</div>

</body>
</html>

Output:

CSS Grid Properties:

column-gap – defines the gap between the columns.

gap – a shorthand property for the row-gap and the column-gap properties.

grid – a shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties.

grid-area – a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.

grid-auto-columns – defines a default column size.

grid-auto-flow – defines how auto-placed items are inserted in the grid.

grid-auto-rows – defines a default row size.

grid-column – a shorthand property for the grid-column-start and the grid-column-end properties.

grid-column-end – defines where to end the grid item.

grid-column-start – defines where to start the grid item.

grid-row – a shorthand property for the grid-row-start and the grid-row-end properties.

grid-row-end – defines where to end the grid item.

grid-row-start – defines where to start the grid item.

grid-template – a shorthand property for the grid-template-rows, grid-template-columns and grid-template-areas properties.

grid-template-areas – defines how to display columns and rows, using named grid items.

grid-template-columns – defines the size of the columns, and how many columns are in a grid layout.

grid-template-rows – defines the size of the rows in a grid layout.

Enjoy coding!

Share this: