22 Apr CSS Grid Container
A grid container is an element whose children are organized into rows and columns.
- When the display property of an element is set to grid or inline-grid, that element becomes a grid container.
- All direct child elements of a grid container automatically become grid items.
This structure allows you to arrange content in a two-dimensional layout, controlling both horizontal (columns) and vertical (rows) placement.
Let us see some examples to create a block-level and inline grid container.
Create a block-level grid container
To create a block-level grid container, use the display property and set it to grid. Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 15px;
gap: 8px;
}
.container div {
background-color: orange;
padding: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h1>Create a block-level grid container</h1>
<div class="container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div>Grid Item 8</div>
</div>
</body>
</html>
Output
Create an inline grid container
To create a block-level grid container, use the display property and set it to inline-grid. Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: navy;
padding: 15px;
gap: 8px;
}
.container div {
background-color: orange;
padding: 10px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h1>Create an inline grid container</h1>
<div class="container">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
<div>Grid Item 3</div>
<div>Grid Item 4</div>
<div>Grid Item 5</div>
<div>Grid Item 6</div>
<div>Grid Item 7</div>
<div>Grid Item 8</div>
</div>
</body>
</html>
Output
If you liked the tutorial, spread the word and share the link and our website, Studyopedia, with others.
Read More:
No Comments