Kotak kotak yang responsif

Saya bertanya-tanya bagaimana saya bisa membuat tata letak dengan kotak responsif . Setiap kotak akan memiliki konten yang selaras secara vertikal dan horizontal . Contoh spesifik ditampilkan di bawah ...

Anda dapat membuat kotak kuadrat responsif dengan konten terpusat vertikal dan horizontal hanya dengan CSS . Saya akan menjelaskan bagaimana dalam proses langkah demi langkah tetapi pertama di sini adalah 2 demo dari apa yang dapat Anda capai:

• Kisi gambar kotak
• Kotak kotak dengan konten

Sekarang mari kita lihat bagaimana membuat kotak responsif mewah ini!

1. Membuat kotak responsif:

Trik untuk menjaga elemen persegi (atau apa pun aspek rasio lainnya) adalah menggunakan persen padding-bottom.
Catatan: Anda dapat menggunakan bantalan atas juga atau margin atas / bawah tetapi latar belakang elemen tidak akan ditampilkan.

Karena bantalan atas dihitung sesuai dengan lebar elemen induk ( Lihat MDN untuk referensi ), tinggi elemen akan berubah sesuai dengan lebarnya. Anda sekarang dapat menjaga rasio aspeknya sesuai dengan lebarnya.
Pada titik ini Anda dapat membuat kode:

HTML :

 <div></div>

CSS

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

Berikut adalah contoh tata letak sederhana dari kotak 3 * 3 menggunakan kode di atas.

Dengan teknik ini, Anda dapat membuat rasio aspek lainnya, di sini adalah tabel yang memberikan nilai padding bawah sesuai dengan rasio aspek dan lebar 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. Menambahkan konten di dalam kotak

Karena Anda tidak dapat menambahkan konten secara langsung di dalam kotak (itu akan memperluas tinggi mereka dan kotak tidak akan menjadi kotak lagi), Anda perlu membuat elemen anak (untuk contoh ini saya menggunakan divs) di dalamnya dengan position: absolute;dan meletakkan konten di dalamnya . Ini akan mengeluarkan konten dari alur dan menjaga ukuran kotak.

Jangan lupa untuk menambahkan position:relative;div orangtua sehingga anak-anak absolut diposisikan / berukuran relatif terhadap orangtua mereka.

Mari kita tambahkan beberapa konten ke kotak 3x3 kotak kami:

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

HASIL <- dengan beberapa pemformatan untuk membuatnya cantik!

3. Memasukkan konten

Secara horizontal:

Hal ini cukup mudah, Anda hanya perlu menambahkan text-align:centerke .content.
HASIL

Penjajaran vertikal

Ini menjadi serius! Triknya adalah menggunakan

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

tapi kita tidak bisa menggunakan display:table;pada .squareatau .contentdivs karena bertentangan dengan position:absolute;sehingga kita perlu membuat dua anak di dalam .contentdivs. Kode kami akan diperbarui sebagai berikut:

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

Kami sekarang telah selesai dan kami dapat melihat hasilnya di sini:

HASIL LENGKAP LANGSUNG

biola yang dapat diedit di sini

Anda bisa menggunakan unit vw (view-width), yang akan membuat kuadrat responsif sesuai dengan lebar layar.

Mock-up cepat ini adalah:

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>

Jawaban yang diterima sangat bagus, namun ini bisa dilakukan dengan flexbox.

Berikut adalah sistem kisi yang ditulis dengan sintaks BEM yang memungkinkan ditampilkannya 1-10 kolom per baris.

Jika ada baris terakhir tidak lengkap (misalnya Anda memilih untuk menampilkan 5 sel per baris dan ada 7 item), item trailing akan dipusatkan secara horizontal. Untuk mengontrol perataan horizontal dari item tambahan, cukup ubah justify-contentproperti di bawah .square-gridkelas.

.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/

Ini diuji dalam FF dan Chrome.

Saya menggunakan solusi ini untuk kotak responsif dari ransum yang berbeda:

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

Lihat demo di JSfiddle.net