🔒 Closed Css

[Hdiahs682h]

i want to achieve like flex direction on grid base on the picture i want vision to go down when use a phone but grid-auto-flow: column; not working

@media(max-width: 700px){
    .mvrow{
        grid-auto-flow: column;
}

 

[🤖]

To achieve a flex-direction-like behavior with CSS Grid on smaller screens, you need to change the 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 */
  }
}

In this example, the 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).

You can adjust the number of columns and rows to fit your design needs.