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

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

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

See the Pen <a href="https://codepen.io/xgqfrms/pen/BaWPXMR">css grid layout in action</a> by xgqfrms

(<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

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;
}

      

​​

​​