Use CSS Grid for a magazine-style layout

You can use flexible, attractive layouts for many different types of page content. Here's how to use CSS Grid to create a magazine-style layout.

CSS offers a lot of flexibility for designing attractive and responsive layouts. A magazine-style layout organizes content that combines photos and text in an eye-catching, engaging format, making it a popular choice.

CSS Grid gives you the tools and granular control needed to achieve a magazine-style layout. So, this is a great interface design technique worth learning.

What is a magazine layout?

The magazine-style layout uses a grid structure to organize content in columns and rows. They are great for displaying different types of content like articles, photos, and ads in an attractive and organized way.

What is CSS Grid?

CSS Grid is a powerful layout tool that allows you to define elements in two dimensions, making it easy to create columns and rows.

With this type of layout, two main components come into play: the grid container, which is responsible for defining the structure of the grid, and the grid items, which are children of the container.

 Here's a simple example of how you can CSS Grid to create a 3x3 grid:

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-item { background-color: #f76a6a; padding: 20px; }

This code defines a grid container with 3 columns of equal width and 20px spacing between items. Result:

Set up HTML structure

For a magazine-style layout, you need a well-structured HTML document. Consider using semantic elements to organize content such as and . Here is a good starting point:

Article title

Article title

Article title

Article title

Article title

Define container grid

To create a grid for a magazine-style layout, add the following CSS code:

.magazine-layout { height: 100%; max-width: 130rem; margin: 0 auto; /* Xác định container grid */ display: grid; /* Xác định đặc điểm cột */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Xác định đặc điểm hàng */ grid-template-rows: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 2rem; }

This CSS defines the container element, .magazine-layout , as a grid container using the display: grid declaration .

The grid-template-columns and grid-template-rows properties use a combination of repeat , auto-fit and minmax . They ensure a minimum column width and column height of 250px and that as many items as possible fit in each column.

Place items in the grid

Now style each post and its content to create attractive thumbnail-style elements:

article { overflow: hidden; border-radius: 0.5rem; position: relative; color: #fff; } .article img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 400px; } .article p { position: absolute; bottom: 0; left: 0; padding: 2rem; background: #333333c1; font-size: 2rem; border-radius: 0.5rem; }

At this point, your website will look like this:

Create a magazine-style layout

For a true magazine-style look, add CSS styles to expand the elements in the article in the order you want:

.article:nth-child(1) { grid-column: 1 / span 3; } .article:nth-child(4) { grid-column: 2 / span 2; }

Your page will look like this:

Responsive design using CSS Grid

One of the advantages of CSS Grid is its inherent responsiveness. You can use media queries to adjust the layout for different screen sizes. For example:

/* Truy vấn media cho màn hình 1100px */ @media screen and (max-width: 1100px) { .article:nth-child(3) { grid-column: 2 / span 2; } .article:nth-child(5) { grid-row: 3 / span 1; } } /* Truy vấn media cho màn hình 600px */ @media screen and (max-width: 600px) { .article:nth-child(2), .article:nth-child(3), .article:nth-child(4), .article:nth-child(5) { grid-column: 1 / span 3; } }

These media queries convert between multiple layout definitions to best fit the device's screen size. The final layout will adapt to different sizes.

CSS Grid is a flexible tool that you can use to create magazine-style layouts that work for a variety of screens. It allows you to define grid structures, place items, and adjust layouts.

Experiment with different grid configurations and styles to achieve the perfect magazine layout for your website.

David Pac

Update 22 October 2023