CSS Properties: How to use grid element using the grid auto placement rules?

Last update on February 23 2024 13:05:50 (UTC/GMT +8 hours)

Solution:

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:

This HTML document showcases the usage of CSS Grid layout for arranging elements.
CSS comments are added to explain each section of the code.
The CSS styles the body, wrapper container, and grid items with specific properties like margin, display, colors, padding, border radius, and font size.
The HTML contains a wrapper div with class "wrapper" serving as the grid container, and multiple div elements with class "box" serving as grid items.
Each box has a unique class name (a, b, c, d, e, f) for customization purposes.

Live Demo:

See the Pen grid-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page