이러한 그리드 항목이 모든 수직 공간을 채우는 이유는 무엇입니까?

debugcn 에 게시 Dev

에이미 휴즈

내 페이지는 다음과 같습니다.

축소판 열이 세로 공간을 채우는 이유는 무엇입니까? 행이 5 개 미만인 경우 이미지는 공간의 상단과 하단으로 나뉩니다. 나는 그들이 위에서 아래로 공간을 채우고 하단에 여분의 공간을 남기기를 원합니다.

이것은 공간을 균등하게 나누는 대신 20px의 수직 간격을 제공합니다 ...

grid-template-rows: auto 1fr;

...하지만 공간은 빈 행으로 채워집니다 (위 링크의 렌더링 된 갤러리 참조).

내가 찾고있는 것은 행 사이에 20px이며 더 이상 콘텐츠를 상단에 정렬하는 것입니다.

.gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
     'gallery-slide-div gallery-thumbs-div'
     'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  grid-auto-rows: auto;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  grid-template-rows: auto 1fr;
}

.gallery-img-title {
  text-align: center;
}

<div class="gallery">
  <div class="gallery-slide-div">
    <img src="/images/gallery/canvas/large/1.jpg" class="gallery-slide-img">
  </div>
  <div class="gallery-thumbs-div">
    <img src="/images/gallery/canvas/small/1.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/2.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/3.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/4.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/5.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/6.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/7.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/8.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/9.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/10.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/11.jpg" class="gallery-thumb-img">
    <img src="/images/gallery/canvas/small/12.jpg" class="gallery-thumb-img">
  </div>
  <div class="gallery-img-title" id="gallery-1-img-title">
    title
  </div>
</div>

마이클 벤자민

코드에서 다음 줄을보십시오.

.gallery-thumbs-div {
    grid-template-rows: auto 1fr;
    grid-auto-rows: auto;
}

이것은 다음으로 번역됩니다.

첫 번째 행은 콘텐츠의 높이 ( auto)입니다.
두 번째 행은 사용 가능한 모든 공간 ( 1fr)을 사용합니다.

grid-template-rows 이제 두 행만 정의되었으므로 완료되었습니다.

grid-auto-rows 이제 인수합니다.

정의되지 않은 세 번째 및 네 번째 행은 콘텐츠의 높이 ( grid-auto-rows: auto)가됩니다.

두 번째 행은 여유 공간을 모두 사용하기 때문에 마지막 두 행을 컨테이너의 맨 아래에 고정합니다.

두 줄을 완전히 제거합니다 ( grid-template-rows두 행만 정의 grid-auto-rows: auto하고 기본적으로 이미 설정되어 있음).

마지막으로을 추가 align-content: start하면 align-content: stretch기본값 이 무시됩니다 .

.gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
      'gallery-slide-div gallery-thumbs-div'
      'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  /* grid-auto-rows: auto; */
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  /* grid-template-rows: auto 1fr; */
  align-content: start; /* new */
}

.gallery-img-title {
  text-align: center;
}

<div class="gallery">
  <div class="gallery-slide-div">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
  </div>
  <div class="gallery-thumbs-div">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">

  </div>
  <div class="gallery-img-title" id="gallery-1-img-title">
    title
  </div>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

이러한 그리드 항목이 모든 수직 공간을 채우는 이유는 무엇입니까?

이러한 그리드 항목이 모든 수직 공간을 채우는 이유는 무엇입니까?

출력이 줄을 일찍 끝내고 줄을 만드는 대신 setfill로 모든 빈 공간을 채우는 이유는 무엇입니까?

제목 요소가 컨테이너의 모든 수직 공간을 차지하는 이유는 무엇입니까?

이 사용자 정의 모양이 전체 수직 공간을 차지하는 이유는 무엇입니까?

그리드 항목 사이에 수직선을 추가하는 방법은 무엇입니까?

xcode의 왼쪽 사이드 바에있는 내 작업 공간에있는 모든 파일을 볼 수없는 이유는 무엇입니까?

공유 라이브러리를 빌드 한 후 이름을 바꿀 수없는 이유는 무엇입니까?

채울 공간이 없으면 부모를 늘리지 않고 <div>를 확장하여 공간을 채우는 방법은 무엇입니까?

모든 항목을 포함하는 하나의 배열이 아니라 모든 항목에 대한 배열이있는 이유는 무엇입니까?

droppable이 드래그되는 항목을 수락하지 않는 이유는 무엇입니까?

C #에서 공용 인스턴스 변수 대신 모든 속성을 사용하는 것이 바람직한 이유는 무엇입니까?

공유 메모리의 연결 목록이 항상 segfault로 연결되는 이유는 무엇입니까?

그리드 행에 추가 공간이있는 이유는 무엇입니까?

이 Material-UI 그리드 항목을 클릭하면 이동하는 이유는 무엇입니까?

모든 Mac 응용 프로그램을 Linux로 쉽게 이식 할 수없는 이유는 무엇입니까?

쉘을 다시 연 후 모든 것이 PATH env 변수로 되 돌리는 이유는 무엇입니까?

이 그룹이 괄호 안에있는 모든 항목을 캡처하지 않는 이유는 무엇입니까?

이 코드로 모든 계정을 나열 할 수없는 이유는 무엇입니까?

이 bash 명령이 장치의 모든 공간을 차지하는 이유는 무엇입니까?

Vue Draggable-그리드의 다른 모든 항목이 이동하지 않도록 선택한 항목 만 바꾸는 방법은 무엇입니까?

NaN 값이있는 여러 속성 (즉, 사용 가능한 모든 속성)으로 항목을 그룹화하는 방법은 무엇입니까?

Powershell이이 항목을 찾을 수없는 이유는 무엇입니까?

Orion Context Broker가 패턴 표현식이있는 쿼리에서 예상하는 모든 항목을 반환하지 않는 이유는 무엇입니까?

목록이 많은 경우 코드 네임 1의 목록에 모든 항목이 표시되지 않는 이유는 무엇입니까?

메인 스레드 (Android)에서 모든 작업을 수행하지 않는 이유는 무엇입니까?

모든 스레드가 잠금을 얻는 이유는 무엇입니까?

flexbox 내의 이미지가 모든 수직 공간을 채우고 완전히 보이도록 유지

브리지 모드에서 두 형제 macvlan간에 ping을 할 수없는 이유는 무엇입니까?

RAID 0이 크기가 다른 두 디스크의 모든 디스크 공간을 활용할 수없는 이유는 무엇입니까?

co_varnames가 모든 변수 이름 목록을 반환하지 않는 이유는 무엇입니까?