질문

여러 열이있는 CSS Grid가 있습니다. 최소 열 width는 100px입니다. 그런 다음 열을 래핑하고 싶지만 래핑 후 나머지 행과 같은 수의 열을 마지막 행에 넣고 싶습니다. 예를 들어 첫 번째 행에 3 셀, 마지막 행에 1 셀을 원하지 않습니다.

마지막 행 셀을 확장하고 싶지 않지만 마지막 행으로 더 많은 셀을 이동하고 모든 셀을 확장합니다.

.grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr))
    }
 
 .element {
 height: 50px;
 border: 2px solid red;
 }

<div class="grid">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Expand snippet

답변1

대신 플렉스 박스를 사용할 수 있습니다

<div class="flex">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element element-100"></div>
</div>

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.element {
  flex: 1 0 100px;
  height: 50px;
}
.element-100 {
  flex: 0 0 100%;
}