programing

반응 사각형 격자

starjava 2023. 9. 14. 21:35
반응형

반응 사각형 격자

반응형 사각형으로 레이아웃을 만드는 방법이 궁금합니다.각 사각형은 수직과 수평으로 정렬된 내용을 갖습니다.구체적인 예는 아래에 표시되어 있습니다...

responsive squares with content

신솔루션(2022)

CSS는 이 답변이 작성된 이후로 변경되었습니다.이제 사각형 그리드에 대한 코드를 대폭 간소화할 수 있는 몇 가지 속성이 있습니다.

  • 그리드 레이아웃(MDN 참조)을 처리할 그리드 속성
  • 각 그리드 항목의 사각 종횡비를 처리하기 위한 종횡비 특성(MDN 참조)
  • 이미지 센터링을 처리하기 위한 객체 적합 속성 및 사각형을 덮어야 하는지 여부(MDN 참조)

다음은 예입니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2%;
}

.square {
  aspect-ratio: 1/ 1;
  display: flex;
  align-items: center;
  padding: 5%;
  background-color: #1E1E1E;
  color: #fff;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}
<div class="grid">
  <div class="square">
    <ul>This demo shows you can center multiple types of content :
      <li>Text</li>
      <li>Images</li>
      <li>Lists</li>
    </ul>
  </div>
  <div class="square">98%</div>
  <div class="square">3.9/5</div>
  <div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
  <div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
  <div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
  <div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>

기답

이것은 여전히 작동하지만 CSS는 작성된 이후로 바뀌었고 ne 속성은 코드를 더 단순하고 이해하기 쉽게 만들 수 있습니다.

CSS만 있으면 세로, 가로 중심의 콘텐츠로 응답형 사각형 격자를 만들 수 있습니다.단계별 프로세스를 설명하겠지만, 먼저 다음과 같이 달성할 수 있는 2가지 데모를 소개합니다.

Responsive 3x3 square grid Responsive square images in a 3x3 grid

이제 어떻게 이 멋진 반응형 사각형을 만들 수 있는지 알아보겠습니다!


1. 반응 사각형 만들기:

요소를 제곱(또는 다른 종횡비)으로 유지하는 방법은 백분율을 사용하는 것입니다.padding-bottom.
사이드 노트: 상단 패딩이나 상단/하단 여백을 사용할 수 있지만 요소의 배경이 표시되지 않습니다.

상단 패딩은 부모 요소의 폭에 따라 계산되므로(참조를 위해 MDN 참조) 요소의 높이는 너비에 따라 변경됩니다.너비에 따라 가로 세로 비율을 유지할 수 있습니다.
이 시점에서 다음을 코드화할 수 있습니다.

HTML:

<div></div>

CSS:

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}

위의 코드를 사용한 3*3 사각형 격자의 간단한 레이아웃 예시입니다.

이 기술을 사용하면 다른 가로 세로 비율을 만들 수 있습니다. 가로 세로 비율과 너비 30%에 따른 하단 패딩의 값을 나타내는 표가 여기 있습니다.

 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

2. 사각형 안에 내용 추가:

사각형 안에 내용을 직접 추가할 수 없으므로(내용의 높이가 확장되고 사각형은 더 이상 사각형이 되지 않음), 해당 내용 안에 하위 요소를 만들어야 합니다(이 예에서는 div를 사용합니다).position: absolute;그 안에 내용물을 집어넣습니다.이렇게 하면 내용이 흐름에서 벗어나 사각형의 크기를 유지할 수 있습니다.

추가하는 것을 잊지 마세요.position:relative;절대 자녀가 부모에게 상대적으로 위치/크기가 되도록 부모 분할에 적용합니다.

3x3 그리드의 사각형에 몇 가지 컨텐츠를 추가해 보겠습니다.

HTML:

<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS:

.square {
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin: 1.66%;
    overflow: hidden;
}

.content {
    position: absolute;
    height: 80%; /* = 100% - 2*10% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

결과 <--예쁘게 만들기 위한 포맷과 함께!

3. 컨텐츠 중심 맞추기:

수평:

이건 꽤 쉬워요, 당신은 그냥 추가하기만 하면 돼요.text-align:center.content.

수직 정렬:

이거 큰일 나요!요령은.

display: table;
/* and */
display: table-cell;
vertical-align: middle;

우리는 사용할 수 없습니다.display:table;위에.square아니면.contentdivs 와 충돌하기 때문에position:absolute;o 안에 두 아이를 만들어야 합니다..content다음과 같이 될 입니다:divs.의는과이트다될다될트v의w이는esslr .

HTML:

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...

CSS:

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

이제 완료되었으며 결과는 여기서 확인할 수 있습니다.

실시간 전체 화면 결과

편집 가능한 fiddle 여기에

화면의 너비에 따라 사각형이 반응하는 vw(view-width) 단위를 사용할 수 있습니다.

이에 대한 간단한 모의실험은 다음과 같습니다.

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

수용된 답변은 훌륭하지만, 이는 다음과 같이 이루어질 수 있습니다.flexbox.

한 행에 1-10개의 열을 표시할 수 있는 BEM 구문으로 작성된 그리드 시스템이 여기 있습니다.

마지막 행이 불완전한 경우(예: 행당 5개의 셀을 표시하도록 선택하고 항목이 7개인 경우), 후행 항목은 수평으로 가운데가 됩니다.후행 항목의 수평 정렬을 제어하려면 아래의 속성을 변경하기만 하면 됩니다..square-grid수업.

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}


.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}
<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

FF와 Chrome에서 테스트합니다.

이제 우리는 이것을 쉽게 사용할 수 있습니다.aspect-ratio ref 소유물

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}
<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

또한 아래와 같이 다양한 수의 열을 가질 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* a square ratio */
  border: 1px solid;
  
  /* center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}
<div class="container">
  <div> some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
  <div>more and more content <br>here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

저는 이 솔루션을 다양한 비율의 응답형 상자에 사용합니다.

HTML:

<div class="box ratio1_1">
  <div class="box-content">
            ... CONTENT HERE ...
  </div>
</div>

CSS:

.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

JSfiddle.net 에서 데모 참조

언급URL : https://stackoverflow.com/questions/20456694/grid-of-responsive-squares

반응형

'programing' 카테고리의 다른 글

WordPress 스케줄 이벤트가 설정된 시간 내에 발생하지 않음  (0) 2023.09.14
WordPress Pagination 작동하지 않는 페이지 2 Page 1과 동일  (0) 2023.09.14
"ERROR 2013 (HY000):데이터를 로드하는 동안 "쿼리 중" MySQL 서버에 대한 연결이 끊어졌습니다.  (0) 2023.09.14
XML 특성 값에서 큰따옴표를 피하려면 어떻게 해야 합니까?  (0) 2023.09.14
Excel 2007/2010은 REST 웹 서비스를 어떻게 소비할 수 있습니까?  (0) 2023.09.14

'programing'의 다른글

  • 현재글반응 사각형 격자

관련글

댓글

티스토리툴바