Creating a Grid Container
By creating a grid container in an HTML web page, you can preview digital content in any web page website in commercial 2-D order. Where you can easily use CSS grid container anywhere to develop any type of responsive web page layout according to your web development needs. Grid container is a powerful web page layout structure design method in CSS web page development. Which helps CSS web developer to easily create complex, user defined responsive web pages and 2-dimensional web page structure layout according to their needs. Grid container in CSS displays web page text information by dividing it into rows and columns. Where you preview the desired web page text item information in proper order inside the created grid container. Where with CSS Grid Container, you can control and manage the web page elements position and align content in both horizontal and vertical direction as compared to CSS layout methods like old float or inline-block.
Create a basic css grid container html example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Grid Container Example In Css</title>
<style>
grid
* {
box-sizing: border-box;
}
body {
font-family: times new roman;
margin: 10;
padding: 10;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 14px;
padding: 20px;
}
.grid-item {
background-color: blue;
color: white;
border: 2px solid #444;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”grid-item”>Home</div>
<div class=”grid-item”>Blog</div>
<div class=”grid-item”>Contact Us</div>
<div class=”grid-item”>About Us</div>
<div class=”grid-item”>Pages</div>
<div class=”grid-item”>Disclaimers</div>
</div>
</body>
</html>
Grid container explanation in CSS.
- HTML – With CSS Grid Container and Grid Items in HTML web page, you can develop a desired web page structure or layout.
- CSS – To enable CSS Grid-Container Grid Layout in HTML web page, display: grid CSS properties are used.
- grid-template-columns properties – Here repeat(auto-fill, minmax(170px, 1fr)) creates responsive CSS Grid columns. Which automatically adjust in the device browser based on the width of the web browser viewport. Where you adjust or set the minimum width of each grid column to 170px as per your requirement.
- gap properties – CSS grid properties adjust a certain amount of space or gap between existing grid items.
- .grid-item properties – Grid items in CSS are text information and grid elements displayed in the grid. Each grid item element can be manually custom formatted with background color, text color, margin, space padding and border attributes.
