CSS Grid and its Two-Dimensional Nature
CSS Grid layout is a new and powerful CSS layout system that enables the easier division of web page content into rows and columns. It is characterised as having the ability to divide information into rows and columns. Because it makes it feasible to create layouts that were previously impossible to create with CSS, it is regarded as a revolutionary “game-changer” for CSS layout.
One of the most important aspects of CSS Grid is that it is a layout system that operates in two dimensions. The CSS Grid can allow the laying out of objects across and down at the same time, in contrast to the Flexbox layout, which only arranges items in a single dimension (either in a row or a column). When compared to single-dimensional approaches, this feature enables the creation of more complicated arrangements. In order to provide clarity on the structure and size of the content, grids are designed to arrange objects in a uniform manner. Grids also allow for the precise arrangement of pieces.
Grid Container (display: grid)
CSS Grid layout is a strong new CSS layout framework that simplifies web page content division into rows and columns. This two-dimensional layout method may arrange things across and down. CSS Grid requires a grid container element.
Applying the display attribute to an element creates a grid container. Grids are created by two display property values:
• Display: grid: Creates a block-level grid. Display: grid; containers fill 100% of the width like block elements.
• Display: inline-grid: Creates an inline grid. Display: inline-grid; operates as an inline container, with width limited to its children.
When a parent element’s display attribute is grid or inline-grid, its immediate children become grid items. CSS Grid then positions and sizes grid items that are statically or relatively positioned. These grid elements cannot use display: inline-block, float, or vertical-align.
Example:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>To make the <section class=”container”> element a grid container, you apply the display: grid; CSS rule to it:
.container {
display: grid; /* Marks this class as a grid container */
grid-template-columns: auto auto ;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid red;
padding: 10px;
font-size: 20px;
text-align: center;
}When the container just has display: grid; applied, the child components are not yet aware of where to place themselves inside the grid. By default, child components will stack or collapse on top of each other until you explicitly define columns and rows with characteristics like grid-template-rows and grid-template-columns.
This grid container may be styled as an inline element rather than a block element by using the following CSS: display: inline-grid;:
.container {
display: inline-grid;
}After creating the grid container, you would normally use additional grid attributes to define the number of rows and columns, as well as the size of those rows and columns (grid-template-rows, grid-template-columns, and grid-template-areas), and then you would position the grid items within that structure.
CSS3 Topics