CSS Tutorial

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2299

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2303

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2309

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2313

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2317

Notice: Trying to get property 'post_status' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2321

Notice: Trying to get property 'ID' of non-object in /home/u212091429/domains/allhostingdeals.com/public_html/wp-admin/includes/template.php on line 2335

CSS Advanced

CSS Responsive

CSS Grid

CSS Grid Item

Child Elements (Items)

A grid container consists of grid items.

By default, a container has one grid item for each column, in each row, but it can be styled for the grid items so that they span multiple columns and/or rows.

The grid-column Property

The grid-column property specifies which column(s) to place an item.

Specify where the item will start, and where the item will end.

To insert an item, a reference can be made to the line numbers, or use the keyword “span” to define how many columns the item will span.

Make “item1” start on column 1 and end before column 5

HTML

				
					<h1>The grid-column Property</h1>

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column 1 and end before column 5:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

CSS

Output

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item1 {
  grid-column: 1 / 5;
}

The grid-column Property

Use the grid-column property to specify where to place an item.

Item1 will start on column 1 and end before column 5:

Make “item1” start on column 1 and span 3 columns

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item1 {
  grid-column: 1 / span 3;
}

Output

The grid-row Property

The grid-row property defines which row to place an item.

You define where the item will start, and where the item will end.

To place an item, a reference can be made to the line numbers, or use the keyword “span” to specify how many rows the item will span.

Make “item1” start on row-line 1 and end on row-line 4

HTML

				
					<h1>The grid-row Property</h1>

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row-line 1 and end on row-line 4:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item1 {
  grid-row: 1 / 4;
}

Output

The grid-row Property

Use the grid-row property to specify where to place an item.

Item1 will start on row-line 1 and end on row-line 4:

Make “item1” start on row 1 and span 2 rows

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item1 {
  grid-row: 1 / span 2;
}

Output

The grid-area Property

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and the grid-column-end properties.

Make “item8” start on row-line 1 and column-line 2, and end on row-line 5 and column line 6.

HTML

				
					<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is:</p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 1 and column-line 2, and end on row-line 5 column-line 6:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Output

Make “item8” start on row-line 2 and column-line 1, and span 2 rows and 3 columns

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Output

Naming Grid Items

The grid-area property assignss names to grid items.

Item1 gets the name “myArea” and spans all five columns in a five columns grid layout

HTML

				
					<p>Item1, is called "myArea" and will take up the place of all five columns:</p>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

CSS

				
					.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

Output

Item1, is called "myArea" and will take up the place of all five columns:

Each row is specified by apostrophes (‘ ‘)

The columns in each row are specified within the apostrophes, separated by a space.

Let “myArea” span two columns in a five columns grid layout (period signs represent items with no name):

CSS

				
					.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

Output

To specify two rows, define the column of the second row within the another set of apostrophes:

Make “item1” span two columns and two rows

HTML

				
					

<p>Item1, is called "myArea" and will take up the place of two columns (out of five), and will span two rows:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

CSS

				
					.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: grey;
  color:#fff;
  text-align: center;
  padding: 20px 0;

Output

Item1, is called "myArea" and will take up the place of two columns (out of five), and will span two rows:

List all items, and make a ready-to-use webpage template

HTML

				
					<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three rows:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

CSS

				
					.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

Output

The grid-area Property

You can use the grid-area property to name grid items.

You can refer to the name when you set up the grid layout, by using the grid-template-areas property on the grid container.

This grid layout contains six columns and three rows:

Header

Main

Right

Footer

The Order of the Items

The Grid Layout enables the user to position the items anywhere we like.

The first item in the HTML code doesn’t appear as the first item in the grid.

HTML

				
					<h1>Sort the Items</h1>

<p>The grid items do not have to be displayed in the same order as they are written in the HTML code.</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

CSS

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Output

Sort the Items

The grid items do not have to be displayed in the same order as they are written in the HTML code.

Re-arrange the order for certain screen sizes, with the help of media queries:

HTML

				
					.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: grey;
   padding: 10px;
}

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

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

Output