Grid Properties: Rows, Columns, Areas
In the CSS grid container in the HTML web page, the web developer has many default properties options to manually customize the web structure and layout. Which the web developer can apply manually in CSS anytime according to his need. The common grid properties here include grid container rows, columns and grid fields, grid repeat, grid auto-fill, grid item arrangement and many other grid properties and features.
So let’s get to know the CSS grid properties in HTML web Page better.
CSS Grid Rows and Columns Properties in HTML Web Page.
Web developers can define the grid rows and column numbers to be displayed in the existing grid container as per their web development needs. Where the web developer can preview by adjusting the grid column rows and the default gap between the grid as per the particular web development need.
CSS Grid Row Columns Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px; /* create 3 columns with 200px widths */
grid-template-rows: 80px 120px; /* create 2 grid container rows with custom heights */
gap: 12px; /* set grid container Space between items */
}
Css grid repeat() properties in HTML web page.
Web developers can use the grid repeat() function to repeat new grid rows as many times as they want rather than manually custom defining each grid column or grid row in an existing grid container as per their web development needs.
CSS Grid Repeat() Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* create 3 equal columns in grid container*/
grid-template-rows: repeat(1, 100px); /* create 1 rows of 100px each */
}
Css auto-fill and auto-fit properties in HTML web page.
CSS Grid auto-fill properties in an existing HTML web page help web developers to create responsive web page designs where grid columns and rows automatically adjust to the available space and preview as per the size of the existing device and electronic device gadgets.
CSS Grid Auto-fill and Auto-fit Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* it used to Columns fill the space */
}
CSS Grid Area Properties in HTML Web Page.
HTML web developers can create specific sections of a grid container and define them individually using the grid area in a grid container created in CSS. Where it is more useful for web developers to create many complex website grid layout structures.
CSS Grid Area Example in HTML Web Page.
.grid-container {
display: grid;
grid-template-areas:
“header header header”
“sidebar content content”
“footer footer footer”;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
Adjusting css item placement properties in HTML web page.
You can manually control and manage your custom designed web page by using CSS grid container properties like CSS grid-column and grid-row. In which you can control where and how to display the preview grid items in the displayed grid container.
CSS Grid Item Arrangement Example in HTML Web Page.
.grid-item-1 {
grid-column: 1 / 4; /* it Span from column 1 to column 4 */
grid-row: 2; /* it Stay in row 2 */
}
So let’s understand all the properties of CSS grid container in HTML web page in a better way in one example.
Here is the complete example using CSS in your HTML web page. Which shows the use of web page grid rows, columns, grid area and grid item placement.
<!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 Properties Example In Css</title>
<style>
.grid-container {
color:black;
text-align: center;
font-family: times new roman;
display: grid;
grid-template-areas:
“header header”
“sidebar content”
“footer footer”;
gap: 12px;
}
.header {
grid-area: header;
background-color: pink;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.sidebar {
grid-area: sidebar;
background-color: red;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.content {
grid-area: content;
background-color: blue;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
.footer {
grid-area: footer;
background-color: teal;
font-size:17px;
color: black;
font-weight: bold;
font-family: times new roman;
}
</style>
</head>
<body>
<div class=”grid-container”>
<div class=”header”>Website Header Area</div>
<div class=”sidebar”>Sidebar Area</div>
<div class=”content”>Content Area</div>
<div class=”footer”>Footer Area</div>
</div>
</body>
</html>
