html - CSS 격자 사각형 레이아웃




css3 css-grid (3)

** @ fcalderan의 대답은이 문제와 모든 신용 예약을 해결합니다. **

이것은 명백하게 정사각형 모양을 깨뜨리지 만, 만약 당신이 어떤 텍스트를 사용한다면, 작은 조정이 당신의 호의에서 작동 할 것입니다. 차라리 ::after 의사 요소를 사용하여 잠재적 내용을 푸시하거나 분할하지 않을 수 있습니다. display: block 변경하면 vertical-aling: top 의 필요성이 제거됩니다.

텍스트를 사용할 때 종횡비를 더 보존하려면 텍스트 position: absolute .

::before::after 를 사용할 때 아래의 스 니펫을 참조하십시오.

.container,
.container2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}

.container2 div::after {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.container2 .text {
  position: absolute;  
}

.container2 div {
  background-color: green;
  position: relative;
  overflow: hidden;
}
<div class="container">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>
  
  <hr>
  <div class="container2">
  <div>
    <div class="text">Here is some text.</div>
  </div>
  <div>
    <div class="text">Here is some more text.</div>
  </div>
  <div>
    <div class="text">Here is some longer text that will break how this looks.</div>
  </div>
</div>

이 질문에는 이미 답변이 있습니다.

내가 그리드를 만들려고 / 레이아웃 사각형으로 구성되어 있습니다. 각 행에 네 개의 사각형. 화면 크기를 변경하면 사각형이 왜곡 될 수 없습니다. 너비와 높이가 항상 동일해야합니다 (고정 값은 필요 없습니다). CSS 그리드를 사용해야합니다. 누구든지 나를 도울 수 있습니까?

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


CSS를 사용하면 항상 종횡비를 1:1 로 유지하기 위해 의사 요소를 사용할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

.container div::before {
  content: "";
  padding-bottom: 100%;
  display: inline-block;
  vertical-align: top;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


grid 동작의 재미와 호기심, 의사 요소를 피하기 위해,

높이를 그리드 컨테이너의 너비와 같게 설정하면 그리드 시스템이 자동으로 행을 늘립니다.

마음에 좋은 알림 :

https://css-tricks.com/snippets/css/complete-guide-grid/

예 : https://gridbyexample.com/

그리드가 전체 브라우저의 너비를 사용하는 경우의 작동 예제

  * {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  height: calc(50vw - 5px);  /*instead playing around with grid gap gap */
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.container div {
  /* bg to show i'm squarred or not ? */
  background-image: linear-gradient( 45deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%);
 
 margin: 0 5px 5px 0;  /*instead playing around with grid gap gap */
  background-color: red;
}


/* extra for demo, not needed */

.container {
  counter-reset: test;
}

.container div {
  display: flex;  /* or grid */
}

.container div:before {
  counter-increment: test;
  content: 'Div N°:'counter(test)' -';
  margin: auto;/* center me */
  color: yellow;
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

포크 또는 노크 할 코덱







css-grid