How can I reduce one row in 2 columns?-CodePudding

I have the code below, when the screen is large I can show all TextField in one row. What I can do, is when the screen size reduce I show this 4 textField in 2 columns and when the size screen is XS in 1 column?

Could you help me with this?

 <div>
        <Stack  
                direction={{ xs: 'column', md: 'row' }}
                spacing={2}
                justifyContent={{ xs: "space-around",  md: "space-between" }}
                alignItems= "center" 
                >
            <TextField 
            size="small" label="label1" />
            <TextField 
            size="small" label="label2" />
            <TextField 
            size="small" label="label3" />
            <TextField 
            size="small" label="label4" />

        </Stack>
    </div>

CodePudding user response：

Well, you didn't specify what UI library you're using but after doing some quick googling, I think you're using MUI (https://mui.com/components/stack/)

If we go on that page we can see that Stack is only for single dimensional layouts - you can only stack the elements inside Stack on top of each other.

If you want to have more than 1 column you need to look into using Grid

https://mui.com/components/grid/

From there on you should be able to figure it out on your own. Good luck! :)

PS: They have a section on multiple breakpoints, from there you can choose how many columns you want to show for which screen size.

CodePudding user response：

I made you a simple demo suits your goal, using pure CSS only. here you are

https://codepen.io/shahemm/pen/RwLRBRv

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <p  size="small" label="label1" />a</p>
    <p  size="small" label="label2" />b</p>
    <p  size="small" label="label3" />c</p>
    <p  size="small" label="label4">d</p>
  </div>
</body>

</html>

css

html, body {
  height: 100%;
}

.grid_item {
  width: 100%;
  background: rgb(63, 63, 63);
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}

@media (max-width: 1080px) {
  .grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .grid {
  grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .grid {
  grid-template-columns: 1fr;
  }
}