it should be like this
Topic summary
A user wants to display blog posts in a 3-column row layout on the Dawn theme.
Two solutions provided:
-
CSS customization approach:
- Navigate to Online Store → Theme → Edit code
- Open Assets → base.css
- Add custom CSS at the bottom targeting
.blog-articleswithgrid-template-columns: 1fr 1fr 1fr !importantfor screens 750px and wider - Additional CSS rules provided for nth-child selectors and grid-column spans
-
Built-in theme settings:
- Dawn theme includes native options to configure the number of blog posts displayed and column count on desktop
- Users can add more blog posts through these settings without custom code
Both solutions aim to achieve the 3-column layout shown in the reference image. The CSS method offers more control, while the theme settings provide a simpler, no-code alternative.
1 Like
- Go to Online Store-> Theme->Edit code
- Asset-> base.css ->paste the below code at the bottom of the file.
@media screen and (min-width: 750px){
.blog-articles {
grid-template-columns: 1fr 1fr 1fr !important;
}
.blog-articles--collage>*:nth-child(3n + 1){
grid-column: span 1 !important;
}
}
2nd solution
it has the option to set up a number of blogs to show and the number of columns on the desktop. You need to add more blog posts
Hi @niceeee , it has option to set up number of blogs to show and number of columns in desktop. You need to add more blog posts
If helpful then please Like and Accept Solution