Высота и ширина квадратной матрицы

Я хочу представить матрицу, где x = y. (3x3, 5x5) в контейнере фиксированной ширины и высоты.

Моя проблема в том, что я не могу динамически квадратировать отдельные ячейки. У меня всегда проблема с высотой.

Моя цель — распределить отдельные поля по всей высоте.

мой код:

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class = "playground bg-img">

  <div class = "row">
    <div class = "cell " id = "a1">1</div>
    <div class = "cell " id = "a2">2</div>
    <div class = "cell " id = "a3">3</div>            
  </div>

  <div class = "row">
    <div class = "cell " id = "b1">4</div>
    <div class = "cell " id = "b2">5</div>
    <div class = "cell " id = "b3">6</div>
  </div>
  <div class = "row">
    <div class = "cell " id = "c1">7</div>
    <div class = "cell " id = "c2">8</div>
    <div class = "cell " id = "c3">9</div>
  </div>

</div>

Вы говорите, что хотите, чтобы каждая ячейка была квадратной, независимо от соотношения сторон всего контейнера?

— 10.05.2022 13:13

@AHaworth Я должен извиниться! Я выразился в вводящей в заблуждение форме. В текущем примере контейнер не является квадратом. Я отрегулирую это немедленно. Итак, контейнер квадратный, и ячейки тоже квадратные.

— 10.05.2022 13:29

html css flexbox

10.05.2022 12:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать CSS Grid Layout.

.playground {
  display:grid;
  grid-template-rows: 1fr 1fr 1fr;
  width:800px;
  height: 600px;
  background: gray;
}
.row {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class = "playground bg-img">

  <div class = "row">
    <div class = "cell " id = "a1">1</div>
    <div class = "cell " id = "a2">2</div>
    <div class = "cell " id = "a3">3</div>            
  </div>

  <div class = "row">
    <div class = "cell " id = "b1">4</div>
    <div class = "cell " id = "b2">5</div>
    <div class = "cell " id = "b3">6</div>
  </div>
  <div class = "row">
    <div class = "cell " id = "c1">7</div>
    <div class = "cell " id = "c2">8</div>
    <div class = "cell " id = "c3">9</div>
  </div>

</div>

И может быть упрощено так:

.playground {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  
  width:800px;
  height: 600px;
  background: gray;
}

.cell {
  background: green;
  width:100%;
  min-height:100%;
  border:1px solid #ccc;
}

<div class = "playground bg-img">

  <div class = "cell " id = "a1">1</div>
  <div class = "cell " id = "a2">2</div>
  <div class = "cell " id = "a3">3</div>

  <div class = "cell " id = "b1">4</div>
  <div class = "cell " id = "b2">5</div>
  <div class = "cell " id = "b3">6</div>

  <div class = "cell " id = "c1">7</div>
  <div class = "cell " id = "c2">8</div>
  <div class = "cell " id = "c3">9</div>

</div>

Спасибо за ваш ответ. Проблема с вашим решением в том, что у меня есть динамическая сетка. Иногда 3х3, потом 5х5. Если бы ваше решение могло покрыть это, я бы дал шанс макету сетки.

— 10.05.2022 13:33

Мне тоже нравится ваше решение. по этой причине +1up тоже. Спасибо!

— 10.05.2022 14:02

10.05.2022 12:55

Ответ принят как подходящий

Сделайте весь контейнер гибким в направлении column, установите flex: 1 на свои строки и ячейки, чтобы они растягивались, чтобы покрыть родительский элемент.

/* This code is only here for dynamic size testing, it's not actually part of the solution */

window.addEventListener('DOMContentLoaded', e => {

  let size = 3;

  document.querySelector('#size-selector').addEventListener('click', e => {
    size = parseInt(e.target.value);
    updateSize();
  });

  function updateSize() {

    const title = document.querySelector('h2');
    title.innerHTML = `${size}x${size}`;

    const grid = document.querySelector('.playground');

    grid.innerHTML = "";
    for (let i = 0; i < size; i++) {
      const row = makeRow(grid);
      const cells = row.querySelectorAll('.cell');
      for (let j = 0; j < size; j++) {
        cells[j].innerHTML = i * size + j + 1;
      }
    }

  }

  function makeRow(grid) {
    const r = document.createElement('div');
    r.classList.add('row');
    for (let i = 0; i < size; i++) {
      makeCell(r);
    }
    grid.appendChild(r);
    return r;
  }

  function makeCell(row) {
    const c = document.createElement('div');
    c.classList.add('cell');
    row.appendChild(c);
    return c;
  }

});

.playground {
  width: 600px;
  height: 600px;
  background: gray;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background-color: red;
}

.cell {
  background: green;
  border: 1px solid #ccc;
  flex: 1;
}

<h2>3x3</h2>
<input type = "number" value = "3" min = "1" id = "size-selector" style = "margin: 1em;" />
<div class = "playground bg-img">

  <div class = "row">
    <div class = "cell " id = "a1">1</div>
    <div class = "cell " id = "a2">2</div>
    <div class = "cell " id = "a3">3</div>
  </div>

  <div class = "row">
    <div class = "cell " id = "b1">4</div>
    <div class = "cell " id = "b2">5</div>
    <div class = "cell " id = "b3">6</div>
  </div>

  <div class = "row">
    <div class = "cell " id = "c1">7</div>
    <div class = "cell " id = "c2">8</div>
    <div class = "cell " id = "c3">9</div>
  </div>

</div>

Спасибо тебе, друг! Это работает идеально! Является гибким. К сожалению, я не понимаю, что делает flex:1, но я тоже почитаю документацию. идеально!

— 10.05.2022 13:49

10.05.2022 13:41

Вы можете заставить соотношение сторон каждой ячейки быть квадратным.

.playground {
  width:600px;
  height: 600px;
  background: gray;
}
.row {
  display:flex;
  min-height:10%;
}
.cell {
  background: green;
  width:100%;
  aspect-ratio: 1 / 1;
  border:1px solid #ccc;
}

<h2>3x3</h2>
<div class = "playground bg-img">

  <div class = "row">
    <div class = "cell " id = "a1">1</div>
    <div class = "cell " id = "a2">2</div>
    <div class = "cell " id = "a3">3</div>            
  </div>

  <div class = "row">
    <div class = "cell " id = "b1">4</div>
    <div class = "cell " id = "b2">5</div>
    <div class = "cell " id = "b3">6</div>
  </div>
  <div class = "row">
    <div class = "cell " id = "c1">7</div>
    <div class = "cell " id = "c2">8</div>
    <div class = "cell " id = "c3">9</div>
  </div>

</div>

Спасибо за ответ. В сафари это решение не работает, но я проверил и в Firefox, и оно работает. Существует исправление для сафари?

— 10.05.2022 13:46

Сафари версии 14.0.3

— 10.05.2022 13:52

Спасибо за это решение. Я бы предпочел, но у этого есть проблема с поддержкой браузера Safari. но +1 тоже

— 10.05.2022 14:01

У меня работает в Safari на iOS. Боюсь, у меня нет компьютера с MacOS, чтобы попробовать.

— 10.05.2022 14:57

10.05.2022 13:42