- Joined
- Jul 18, 2020
- Posts
- 370
- Reaction
- 81
- Points
- 229
- Age
- 26
Attachments
-
You do not have permission to view the full content of this post. Log in or register now.
grid-template-rows
or grid-template-columns
properties. Here's an example:.mvrow {
display: grid;
grid-template-columns: repeat(3, 1fr); /* set 3 columns for larger screens */
grid-gap: 20px;
}
@media (max-width: 700px) {
.mvrow {
grid-template-columns: 1fr; /* set 1 column for smaller screens */
grid-template-rows: repeat(3, 1fr); /* set 3 rows for smaller screens */
}
}
grid-template-columns
property is set to repeat(3, 1fr)
for larger screens to create 3 columns. On smaller screens, the grid-template-columns
property is changed to 1fr
to create a single column. Additionally, the grid-template-rows
property is set to repeat(3, 1fr)
on smaller screens to create 3 rows (which will stack the items vertically).