>  Q&A  >  본문

컨테이너 끝에 그리드 요소를 배치하는 방법

<p>그리드 컨테이너가 있고 내 항목이 맨 아래에 있도록 하고 싶습니다. </p> <p>저는 이 사실을 가지고 있습니다</p> <p>이거 갖고 싶어요 기대</p> <p> <pre class="brush:css;toolbar:false;">.container { 디스플레이: 그리드; 그리드 템플릿 열: 반복(14, 1fr); 그리드 템플릿 행: 반복(6, 1fr); 그리드 간격: 8px; 너비: 200px; 배경: 파란색; } .안건 { 배경색: 빨간색; 색상: 흰색; } .item-1 { 그리드-열: 범위 5; 그리드 행: 범위 6; } .item-2 { 그리드-열: 범위 4; 그리드 행: 범위 5; } .item-3 { 그리드-열: 범위 3; 그리드 행: 범위 4; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="item item-1">항목 1</div> <div class="item item-2">항목 2</div> <div class="item item-3">항목 3 </p> <p>PS: place-items: end 및 align-items: end;</p>
P粉387108772P粉387108772439일 전396

모든 응답(1)나는 대답할 것이다

  • P粉710478990

    P粉7104789902023-08-29 09:06:26

    grid-columngrid-row的两个值start / end구문을 사용하여 프로젝트가 시작되고 끝나는 위치를 결정할 수 있습니다.

    예를 들어 grid-row: 2 / span 3;는 두 번째 그리드 선에서 시작하여 다섯 번째 그리드 선까지 3개의 그리드 선에 걸쳐 있습니다.

    으아악 으아악

    회신하다
    0
  • 취소회신하다