HTML CSS Exercise: CSS Grid
Solution:
HTML Code:
<!DOCTYPE HTML><!-- Specifies the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<head>
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS exercise - create a CSS Grid</title><!-- Sets the title of the webpage -->
<style type="text/css"> /* Begins CSS styling */
.container, .row { /* Styles for container and row elements */
width: 100%; /* Sets the width of container and row to 100% */
}
.row:before, .row:after { /* Styles for pseudo-elements before and after the row */
display: table; /* Displays pseudo-elements as table elements */
content: ""; /* Sets the content of pseudo-elements to an empty string */
}
.row:after { /* Styles for pseudo-element after the row */
clear: both; /* Clears floats after the row */
}
.col1, .col2, .col3 { /* Styles for column elements */
float: left; /* Floats column elements to the left */
width:25.333333333%; /* Sets the width of each column to approximately one-third of the container */
margin:1%; /* Sets margin for each column */
padding:1%; /* Sets padding for each column */
}
</style>
</head>
<body>
<div class="container"><!-- Begins the container element -->
<div class="row"><!-- Begins the first row -->
<div class="col1"><!-- First column in the first row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2"><!-- Second column in the first row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3"><!-- Third column in the first row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div><!-- Ends the first row -->
<div class="row"><!-- Begins the second row -->
<div class="col1"><!-- First column in the second row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col2"><!-- Second column in the second row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col3"><!-- Third column in the second row -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div><!-- Ends the second row -->
</div><!-- Ends the container element -->
</body>
</html>
Explanation:
- This HTML/CSS code creates a simple grid layout using floats.
- The .container class sets the width of the container to 100%.
- The .row class is used to create rows, with pseudo-elements (:before and :after) to clear floats.
- Columns are defined using classes .col1, .col2, and .col3, each floating left and occupying approximately one-third of the container's width.
- Inside each column, there's a <p> element containing placeholder text.
Live Demo:
See the Pen grid-answer by w3resource (@w3resource) on CodePen.
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.