Article title
Article title
Article title
Article title
Article title
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.
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:
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:
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.