반응 형 사각형 격자

반응 형 사각형 으로 레이아웃을 만드는 방법에 대해 궁금합니다 . 각 사각형에는 세로 및 가로로 정렬 된 내용이 있습니다. 구체적인 예는 다음과 같습니다.

콘텐츠가 포함 된 반응 형 사각형

답변

당신은 할 수 있습니다 사각형의 반응 그리드를 verticaly과 수평입니다과 중심 내용 만에 CSS . 단계별 프로세스에서 방법을 설명하지만 먼저 여기에 달성 할 수있는 두 가지 데모가 있습니다.

이제이 멋진 반응 형 사각형을 만드는 방법을 알아 보겠습니다!

1. 반응 형 사각형 만들기 :

요소를 제곱 (또는 다른 종횡비)으로 유지하는 트릭은 percent를 사용하는 것 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;절대 자식이 부모에 상대적으로 위치 / 크기가되도록 부모 div 를 추가 하는 것을 잊지 마십시오 .

3×3 정사각형 격자에 내용을 추가해 봅시다.

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; on .square또는 .contentdiv는 충돌하기 때문에 사용할 수 없으므로 div position:absolute;안에 두 개의 자식을 만들어야 .content합니다. 코드는 다음과 같이 업데이트됩니다.

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%;
}

이제 끝났고 결과를 살펴볼 수 있습니다.

라이브 풀 스크린 결과

여기에서 편집 가능한 바이올린

답변

vw (가로 폭) 단위를 사용하면 화면 너비에 따라 사각형이 반응합니다.

이것의 빠른 모형은 다음과 같습니다.

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 개의 항목이있는 경우) 후행 항목이 가로로 가운데에 배치됩니다. 후행 항목의 가로 정렬을 제어하려면 클래스 아래에서 justify-content속성을 변경하면 됩니다.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>

스 니펫 확장

피들 : https://jsfiddle.net/patrickberkeley/noLm1r45/3/

이것은 FF 및 Chrome에서 테스트되었습니다.

답변

다른 배급량의 반응 형 상자에이 솔루션을 사용합니다.

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 데모보기

답변

Exit mobile version

IT HOW

무엇이는 물어보세요

반응 형 사각형 격자

답변

1. 반응 형 사각형 만들기 :

2. 사각형 안에 내용 추가

3. 콘텐츠 중심

라이브 풀 스크린 결과

답변

답변

답변

답변