검색
검색

최대 너비 컨테이너 내부에 그리드 항목을 만들어 전체 너비를 확장하는 방법은 무엇입니까?

debugcn 에 게시 Dev
6
미샤 모로 쉬코

CSS 그리드는 다음이있는 페이지에 있습니다 max-width.

여기에 이미지 설명 입력

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 400px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / -1;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 1 / -1;
  background-color: tomato;
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
  }
  .first-grid-item {
    grid-column: 1 / 9;
  }
  .second-grid-item {
    grid-column: 9 / 13;
  }
}
<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

작은 화면에서는 레이아웃이 변경되고 두 번째 그리드 항목이 첫 번째 항목 아래에 배치됩니다.

여기에 이미지 설명 입력

이제 작은 화면의 두 번째 항목에 전체 너비 배경색을 추가하기위한 새로운 요구 사항이 추가되어 다음과 같이 보입니다.

여기에 이미지 설명 입력

어떻게 이걸 달성하겠습니까?

참고 :

  • 그리드는 페이지 중간에 나타날 수 있지만 반드시 페이지의 유일한 요소는 아닙니다. 예 : 여기
  • 그리드 항목은 미리 알려지지 않은 가변 높이를 가질 수 있습니다. 예 : 여기
  • 화면 크기가 다음과 같은 경우 :
    • 400px 미만-그리드가 전체 화면 크기를 차지해야합니다.
    • 400px에서 575px (포함) 사이-그리드가 정확히 차지해야합니다 400px( max-width작은 화면에서).
    • 최소 576px-그리드가 정확하게 차지해야합니다 500px( max-width더 큰 화면에서).
  • 이를 구현하는보다 자연스러운 방법이 있다고 생각되면 HTML을 변경할 수 있습니다. 요소가 필요한 위치에서 이동하지 않는지 확인하십시오.
Afif 동반

작은 화면에서는 그리드가 실제로 필요하지 않습니다.

내 시도는 다음과 같습니다.

body {
  outline: 1px solid black;
}

.first-grid-item{
  max-width: 400px; /* Only restrict the first item */
  margin: 0 auto;
}

.first-grid-item {
  background-color: #ccc;
}

.second-grid-item {
  background-color: tomato;
  padding:0 calc(50% - 200px); /* to have the content inside the 400px (remove this if not)*/
}

@media (min-width: 576px) {
  .max-width {
    max-width: 500px;
    margin: 0 auto;
  }
  /* only here we need the grid */
  .grid {
    display: grid; 
    grid-template-columns: repeat(12, 1fr);
  }
  /**/
  .first-grid-item {
    grid-column: 1 / 9;
    margin:0; /* reset margin */
    max-width: 100%; /* reset max-width */
  }
  .second-grid-item {
    grid-column: 9 / 13;
    background-color: lightblue;
    padding:0; /* reset padding */
  }
}
<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

다음과 같이 할 수도 있습니다.

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 500px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / 9;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 9 / 13;
  background-color: lightblue;
}

@media (max-width: 576px) {
  .max-width {
    max-width: 100%;
  }
  .grid {
    display: block;
  }
  .first-grid-item {
    max-width: 400px;
    margin: 0 auto;
  }
  .second-grid-item {
    background-color: tomato;
    padding: 0 calc(50% - 200px);
  }
}
<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

다른 색을 가지려면 여러 배경으로 쉽게 할 수 있습니다.

body {
  outline: 1px solid black;
}

.max-width {
  max-width: 500px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.first-grid-item {
  grid-column: 1 / 9;
  background-color: #ccc;
}

.second-grid-item {
  grid-column: 9 / 13;
  background: 
    linear-gradient(lightblue,lightblue) content-box,
    tomato;
}

@media (max-width: 576px) {
  .max-width {
    max-width: 100%;
  }
  .grid {
    display: block;
  }
  .first-grid-item {
    max-width: 400px;
    margin: 0 auto;
  }
  .second-grid-item {
    padding: 0 calc(50% - 200px);
  }
}
<div class="max-width">
  <div class="grid">
    <div class="first-grid-item">First</div>
    <div class="second-grid-item">Second</div>
  </div>
</div>

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관