CSS Grid 布局的 item 最后一行，不拉伸 All In One

CSS Grid 布局的 item 最后一行，不拉伸 All In One

UI 产品需求：

0. 容器宽度: 有最小值，最大值
1. 每个 item 左对齐，完全填充容器宽度
2. item 有最小宽度？最大宽度
3. 最后一行，左对齐，不用填充全部 （不拉伸 ）

效果一
📦 📦 📦 📦
📦 📦 📦 📦
📦 📦 📦 📦
📦 📦 📦 📦
📦 📦

效果二
📦 📦 📦 📦 📦
📦 📦 📦 📦 📦
📦 📦 📦 📦 📦
📦 📦 📦

??? css flex 布局的 item 最后一行，不拉伸 ❌

css functions

repeat & auto-fit & minmax & 1fr

.select-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    flex-wrap: wrap;
    margin: 20px 0 0 20px;
    overflow-y: visible;
}

.item {
    min-width: 320px;
    margin-bottom: 20px;
}

demo

https://codepen.io/xgqfrms/pen/BaWPXMR

bug ❌

body {
  box-sizing: border-box;
  padding: 10vh 10vw;
  margin: 0;
}

/* 
repeat & auto-fit & minmax & 1fr

*/ 
.box {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-wrap: wrap; 
  border: 1px solid red;
  background: #ccc;
  min-height: 400px;
  // height: 400px;
  // overflow-y: visible;
}

// item overflow-x bug ??? ❌

.item {
  box-sizing: border-box;
  // padding: 0 10px;
  padding: 0;
  // margin: 0;
  margin: 0 10px;
  min-width: 200px;
  height: 50px;
  background: #000;
  color: #0f0;
  border: 1px solid red;
  text-align: center;
  line-height: 50px;
}

OK

body {
  box-sizing: border-box;
  padding: 10vh 10vw;
  margin: 0;
}

.resizable {
  overflow: auto;
  // 必须设置 overflow: auto; 才能 resize 容器 ✅
  cursor: col-resize;
  // cursor: all-resize;
  // cursor: col-resize;
  // cursor: row-resize;
  resize: horizontal;
  // resize: none;
  // resize: both;
  // resize: horizontal;
  // resize: vertical;
  // resize: block;
  // resize: inline;
}

/* 
repeat & auto-fit & minmax & 1fr

*/ 
.box {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex-wrap: wrap; 
  border: 1px solid red;
  background: #ccc;
  min-height: 400px;
  // height: 400px;
  // overflow-y: visible;
}
.box-samll {
  min-height: 200px;
  margin-bottom: 30px;
}

// item overflow-x bug ??? ❌

.item {
  box-sizing: border-box;
  // padding: 0 10px;
  padding: 0;
  // margin: 0;
  margin: 0 10px;
  min-width: 200px;
  height: 50px;
  background: #000;
  color: #0f0;
  border: 1px solid red;
  text-align: center;
  line-height: 50px;
}


.item-empty {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  // flex: 0 1 auto;
  // flex: 1 auto;
  width: 200px;
  height: 0;
}

css resize & css cursor

.resizable {
  overflow: auto;
  // 必须设置 overflow: auto; 才能 resize 容器 ✅
  cursor: col-resize;
  resize: horizontal;
}

.resizable {
  overflow: auto;
  // 必须设置 overflow: auto; 才能 resize 容器 ✅
  cursor: col-resize;
  // cursor: all-resize;
  // cursor: col-resize;
  // cursor: row-resize;
  resize: horizontal;
  // resize: none;
  // resize: both;
  // resize: horizontal;
  // resize: vertical;
  // resize: block;
  // resize: inline;
}

refs

https://codepen.io/xgqfrms/pen/JYyNYK

https://www.cnblogs.com/xgqfrms/p/14866095.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---