How To Create A 3-column Layout Grid With CSS? - Studytonight

Trang chủ » Html 3 Column Layout Example » How To Create A 3-column Layout Grid With CSS? - Studytonight

Có thể bạn quan tâm

How to create a 3-column layout grid with CSS?

The layout is very important while designing a website. CSS grid layout is used to add columns and rows to the webpage. We can add any number of columns or rows to the webpage. Lets us see how we can create a 3-column layout with CSS.

Using CSS flexbox

We can create a 3-column layout grid using CSS flexbox. Add the display: flex property to the container class. Set the flex percentage value to each column. Here for three-layer, we can set flex: 33.33%. In addition, use other CSS properties to customize the column.

Example: Create a 3-column layout grid with CSS

Here is a program to create a 3-column layout using flexbox properties. Both the column has equal width.

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML</title> <style> .column { flex: 33.33%; height: 200px; padding: 10px; margin: 5px; background-color: #cccccc; text-align: center; } .container { display: flex; } </style> </head> <body> <h2> 3-column grid layout</h2> <div class="container"> <div class="column"> <h2> First column </h2> <p> This is first column of our grid system</p> </div> <div class="column"> <h2> second column </h2> <p> This is second column of our grid system</p> </div> <div class="column"> <h2> Third column </h2> <p> This is third column of our grid system</p> </div> </div> </body> </html>

Output

Here is the output of the above code.

3-column grid layout

Using CSS grid property

The grid property is used to layout major page areas or small user interfaces. We can create a grid of fixed track sizes. We can create columns by creating a grid container using display: grid. To add three columns use grid-template-columns. Specify the width of each column separated by white space. So we can add variable-width layout using grid property.

Conclusion

In this tutorial, we have learned to create three columns grid layout using CSS properties. It can be created using flexbox properties or grid properties. Grid properties can be used to create variable-width columns.

Từ khóa » Html 3 Column Layout Example