我有一行包含6个项目。根据宽度，它将把项目分成新的行。
问题是这可能发生（星号为项目）：
*****
*
当我调整屏幕大小时，我希望它像下面这样适应：
******
***
***
**
**
**
*
*
*
*
*
*
我知道我可以为此使用媒体查询，但希望有其他解决方案。有吗？
main {
background: #eee;
max-width: 600px;
}
section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, auto));
grid-gap: 1rem;
}
div {
background: #ddd;
}<main>
<section>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</section>
</main>您必须使用媒体查询。我认为没有其他任何意义。
main {
background: #eee;
max-width: 600px;
}
section {
display: grid;
grid-template-columns: repeat(6, minmax(100px, auto));
grid-template-rows: repeat(1, 1fr);
grid-gap: 1rem;
}
@media only screen and (max-width: 800px) {
section {
grid-template-columns: repeat(3, minmax(100px, auto));
grid-template-rows: repeat(2, 1fr)
}
}
@media only screen and (max-width: 600px) {
section {
grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-rows: repeat(3, 1fr)
}
}
@media only screen and (max-width: 400px) {
section {
grid-template-columns: repeat(1, minmax(100px, auto));
grid-template-rows: repeat(6, 1fr)
}
}
div {
background: #ddd;
}<main>
<section>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</section>
</main><html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-dark" name="">
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-danger" name="">
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-light" name="">
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-primary" name="">
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-info" name="">
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
<input type="text" class="form-control bg-primary" name="">
</div>
</div>
</body>
</html>尝试一下