HTML Code:
<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to use grid element using the grid auto placement rules</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
body{ /* Styles applied to the body element */
margin: 50px; /* Sets the margin around the body content */
}
.wrapper{ /* Defines a CSS class named wrapper for the grid container */
display: grid /* Sets the display property to grid */
grid-template-columns: 100px 10px 100px 10px 100px; /* Defines the width of grid columns */
grid-template-row: auto 50px auto; /* Defines the height of grid rows */
background-color: #ff99CC; /* Sets the background color of the wrapper */
color: #FF0000; /* Sets the text color of the wrapper */
}
.box { /* Defines a CSS class named box for grid items */
background-color: #0000FF; /* Sets the background color of the boxes */
color: #66FF00; /* Sets the text color of the boxes */
border-radius: 20px; /* Sets the border radius to create rounded corners */
padding: 20px; /* Sets padding inside the boxes */
font-size: 100%; /* Sets the font size of the text inside the boxes */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<div class="wrapper"><!-- Begins the wrapper container for grid items -->
<div class="box a">HTML5</div><!-- Grid item with class 'box' and unique class 'a' -->
<div class="box b">PHP</div><!-- Grid item with class 'box' and unique class 'b' -->
<div class="box c">SQL</div><!-- Grid item with class 'box' and unique class 'c' -->
<div class="box d">MYSQL</div><!-- Grid item with class 'box' and unique class 'd' -->
<div class="box e">JavaScript</div><!-- Grid item with class 'box' and unique class 'e' -->
<div class="box f">Python</div><!-- Grid item with class 'box' and unique class 'f' -->
</div><!-- Ends the wrapper container -->
</body>
</html><!-- Ends the HTML document -->
Explanation:
Live Demo:
See the Pen grid-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4