A Complete Guide On CSS Grid Layout Module In Drupal
Are you tired of arranging your page layout using floats and precise CSS positioning? Not all browsers are compatible with them all the time. Time for a more seamless resolution! Let's discuss about the recently introduced CSS Grid or Grid Layout module, which gives CSS a two-dimensional grid system.
With its rows and columns, this grid-based layout system is a flexible tool for content organization that makes creating intricate layouts simpler. For more information on CSS Grid Layout and how to include the Drupal module into your project, see the rest of the blog.
CSS Grid Terminology
Grid Properties
Implementing the Drupal CSS Grid layout module
CSS Grid Terminology
In CSS Grid, grid containers and grid items follow a similar concept to that of CSS Flexbox, where we have flex containers and flex items. We only need to set a container's display property to "Grid" to transform it into a CSS Grid container.
Grid Container: Within its bounds, the grid container encloses every grid item.
Grid Cell: A grid cell, or grid item, is any individual item contained within a grid container.
[caption id="attachment_8740" align="alignnone" width="834"] specbee[/caption]
A grid layout places rows along the X-axis and columns along the Y-axis to create a two-dimensional structure.
Grid Line: The lines dividing the grid into rows and columns, both vertical and horizontal, are referred to as grid lines. They have automatic numbering for both rows and columns, ranging from 1 to the total number of rows or columns plus 1.
Grid Gap: A gutter is the area that exists between grid cells.
Grid Track: A grid track is made up of grid components that are arranged in a row or column. We refer to a vertical alignment as a "column track," and a horizontal alignment as a "row track."
Grid Area: A grid area is the space that lies between two lines that are vertical and horizontal.
[caption id="attachment_8737" align="alignnone" width="697"] specbee[/caption]
HTML
<div class="wrapper">
<div class="header">Header</div>
<div class="box-1">Box 1</div>
<div class="box-2">Box 2</div>
<div class="box-3">Box 3</div>
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
CSS
.wrapper{
display: grid;
grid-template-rows: 100px 200px 400px 100px;
grid-template-columns: repeat(3, 1fr) minmax(200px, 1fr);
grid-gap: 30px;
// Line names
grid-template-rows: 100px [box-start] 200px [box-end content-start] 400px [content-end] 100px;
// Grid area names
grid-template-areas: "head head head ."
"box1 box2 box3 side"
"main main main side"
"foot foot foot foot";
}
// Using Line numbers
.header{
grid-column: 1 / -1;
}
.main-content{
grid-row: 3 / 4;
grid-column: 1 / 4;
}
// Using Line Names
.sidebar{
grid-row: box-start / content-end;
}
// Using Grid Area Names
.footer{
grid-column: foot;
}
Grid Properties
To use display:grid to make an element a container for a grid,
grid-template-row: Indicates how many rows there are in a grid arrangement.
grid-template-column: Indicates how many columns there are in a grid arrangement.
row-gap & column-gap: Indicates the space that separates a grid row from a grid column.
grid-gap: In a grid layout, it indicates the space between the rows and columns, respectively.
The Repeat function is used to represent a repeating section of the tracklist. It allows for the succinct representation of a repeating pattern across a significant number of rows or columns.
The Fr unit is a fractional unit that computes layout divisions on the fly. You receive one share of the grid's usable space with 1fr.
Naming Grid Lines: Use the grid-template-rows and grid-template-columns attributes to define your grid and provide names to individual lines or to all of them.
Labeling Grid Sections - The grid-template-sections By defining the grid's cells and giving them names, the CSS property defines named grid regions.
grid-row: The beginning and ending positions of the grid item within the grid row.
grid-columns: The beginning and ending positions of the grid item within each grid column.
min-content: This attribute indicates the content's intrinsic minimum width.
max-content: This attribute indicates the content's intrinsic maximum height or breadth.
A size range that is more than or equal to min and less than or equal to max content is defined by minmax.
[caption id="attachment_8744" align="alignnone" width="501"] specbee[/caption]
HTML
<div class="container">
<div class="item item--1">Modern</div>
<div class="item item--2">CSS</div>
<div class="item item--3">with</div>
<div class="item item--4">Flexbox</div>
<div class="item item--5">and</div>
<div class="item item--6">Grid</div>
<div class="item item--7">is</div>
<div class="item item--8">Great</div>
</div>
CSS
.container{
display: grid;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(2, 300px);
grid-auto-flow: row;
grid-auto-rows: 150px;
grid-gap: 30px;
// Aligning content in row direction
align-content: center;
// Aligning content in column direction
Justify-content: center;
// Aligning items in row direction
align-items: center;
// Aligning items in column direction
justify-items: center;
.item{
&--2{
grid-row: 2 / span 2;
// Aligning item in row direction
align-self: center;
// Aligning item in column direction
justify-self: center;
}
}
align-items - Align Grid elements in the column/vertical axis or within the grid cell.
justify-items: Align grid elements along the row/horizontal axis inside the grid cell.
align-self: This command overrides the grid item's align-items value and positions the object inside the column/vertical axis cell or region.
justify-self: This command overrides the justify-items value of the grid item and centers the object inside the cell, area row, and horizontal axis.
align-content: Indicates how a grid container's content is arranged vertically or along the column axis.
justify-content: Indicates how a grid container's content is arranged horizontally and along the row axis.
Grid-auto-flow - This parameter controls the row or column direction in which automatically placed items are added to the grid. Row is the default value.
grid-auto-rows: This attribute determines a grid container's row size.
grid-auto-columns: This property determines the size of a grid container's columns.
auto-fill: This property adds as many columns to a row as it can, even if the new column is empty and takes up space in the row.
[caption id="attachment_8738" align="alignnone" width="1201"] specbee[/caption]
auto-fit: As many columns as possible are added to rows. To avoid creating unnecessary space, vacant cells are collapsed and their width is set to 0.
[caption id="attachment_8739" align="alignnone" width="1201"] specbee[/caption]
Implementing the Drupal CSS Grid layout module
Content may be structured and organized with flexibility and efficiency thanks to the Drupal CSS Grid Layout module, which easily incorporates the power of CSS Grid into your Drupal environment.
Setting up the module
Required conditions:
Install the CSS Grid Layout module using the Layout Builder, Layout Discovery, and
- composer require 'drupal/css_grid:^1.0@beta'
Next, turn on this module: Management > expand
[caption id="attachment_8736" align="alignnone" width="1600"] specbee[/caption]
Create a new page in the layout builder:
Layout builder page → layout → Add section → Content → add content
You now possess a freshly designed CSS Grid layout.
[caption id="attachment_8734" align="alignnone" width="1600"] specbee[/caption]
By selecting CSS Grid, you may design a dynamic grid layout with options for rows, columns, and gaps.
[caption id="attachment_8735" align="alignnone" width="1600"] specbee[/caption]
After that, you can add column, row, and gap values based on the structure you want.
[caption id="attachment_8743" align="alignnone" width="1600"] specbee[/caption]
Additionally, you have a variety of CSS and grid layout unit options.
[caption id="attachment_8741" align="alignnone" width="1600"] specbee[/caption]
Conclusion
We hope that this tutorial has helped you with Drupal Core with Composer. Additionally, Appic Softwares is a company you should check out if you’re wanting to hire Drupal developers on a devoted basis.
You can employ our team of knowledgeable Drupal developers to handle your software.
So, what are you waiting for?
Hire them now!
