Split layout with CSS Grid Layout

Tram Ho

With Css Grid, you can create complex web designs. It is very intuitive and well supported with many different browsers. In this article we learn how to build layouts with CSS Grids.

Setting up CSS Grid

The two core components of a grid are the outer div (parent) and internal item (children).

div outer div creates the grid and the item is the content within the grid .

Below is an example of a container class with 6 child item

To turn div.container into a grid , we need to css into the container class

We have defined parent div in grid form but have not yet customized each item .

Therefore, the default item will be stacked.

Defining Columns and Rows

CSS Grid is a CSS layout method developed in the form of 2-dimensional layouts of items on web pages or applications, meaning it can handle both columns and rows.

CSS Grid excels at dividing a page into sections or determining correlations in size, position, and layer.

So to make the grid a 2-dimensional layout, we will need to determine the number of columns and the number of rows. Assume that 3 columns and 2 rows need to be created.

We use the grid-template-row and grid-template-column properties

3 values ​​of grid-template-columns will be 3 columns respectively

2 values ​​of grid-template-rows correspond to 2 rows

* The specific values ​​above tell us that each column is 200px wide and 100px high

Adding Grid-Gap Between Items

To set spacing between rows and columns, you can use grid-column-gap and grid-row-gap or grid-gap .

Here, I’m using the grid-gap attribute. Here you can understand it simply as an attribute written neatly, combined by two properties grid-column-gap and grid-row-gap .

Note: When using one of the three properties, spaces are only created between item and not outside the grid .

Explicit And Implicit Grid (Explicit and Default Grid)

Before moving on, we need to understand the concept of grid lines . With the CSS grid, the lines between the columns are called column line , while the lines between the rows are called row line .

Assuming with a 3×3 grid , we have the following grid lines :

It should be noted that the grid line is numbered starting from 1, not from 0 as usual for us or your code 😅😅😅

Quick tip : If you’re using Firefox , you can use the debug CSS Grid feature in the Developer Tool to see grid lines more clearly.

Explicit

Explicit will set for a grid created by columns and rows with the grid-template-columns and grid-template-rows properties. And you can use the grid-template attribute to identify rows and columns .

Implicit

The grid-auto-columns and grid-auto-rows properties are used to define Implicit grid .

Now let’s test the rows to 50px height and see what happens:

Now all the lines added will be 50px high.

Grid can only grow in one direction, so it only adds rows or columns. As a result, only one of the above properties is effective. And you can change the direction of the Implicit grid to your liking by using the grid-auto-flow attribute

Repeating Grid Tracks

If in a grid we need to repeat the grid tracks many times then we can use the repeat() attribute.

Fractional Units (Fractional Units)

  • The symbol is: fr

Besides using familiar units like px , % , em , rem … You can also use fr . fr , short for "fraction" (phân số) , is a new size unit designed specifically for grid . 1fr corresponds to a piece of free space in a grid container .

For three columns of equal width, we can use fr , instead of setting a width: calc(100%/3) . With this use, we can add more children, while the width remains the same for all children.

We can also easily combine fr units with any other familiar CSS units.

Sizing Individual Grid Items (Sizing Individual Grid Items)

To determine the width of an item inside the container class in grid form, we will use it with the keyword span

grid-column: 1 / span 3 means it takes 3 columns from the track line number 1 running from left to right of the column.

In addition to using keyword span , you can set the start and end points to expand.

grid-column: 1/4 means that it will start from the track line number 1 to the track line 4 from left to right of the column.

grid-row: 1/3 means it will start from track line number 1 to track line 3 from top to bottom of the row.

Note: If you want your item to spread across the entire width of the grid , but don’t know how wide the grid is, you can set

Positioning Items in the Grid (Positioning Items in the Grid)

With CSS Grid, you can position the elements in the grid as you like. You can move child elements with 4 CSS properties: grid-row-start , grid-row-start , grid-column-start or grid-column-end . One thing to note, the position (position) is not made by the columns (grid columns), but by the track line.

Track sizing and minmax ()

When doing responsive , you set a fixed size for the item , which results in content content being pushed when you view it in a smaller viewport. So minmax() will make your item size flexible for each screen size

The minmax () function has two parameters: the first is the minimum size of the track and the second is the maximum size.

Besides the fixed value we also have the value that can also be automatically, allowing the track to automatically resize based on the size of the content.

Auto-Fill vs Auto-Fit

Two values ​​are often used in the repeat() function.

Auto-fill : fill in the row (row) with as many columns (column) as possible.

Auto-fit : Columns (Columns) take up available space.

Justify Content

Justify Content helps you align items grid on the row axis .

Align Content

Align Content helps you align items grid on column axis .

summary

Above is how to use some of CSS Grid ‘s most basic properties. Hopefully, this article can help someone who wants to learn about CSS Grid . Thank you for reading all my posts! 🤗🤗🤗

References:

https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

https://www.w3schools.com/css/css_grid.asp

https://developer.mozilla.org/en-US/docs/Learn/CSS

Share the news now

Source : Viblo