Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2019, 17:34
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 478

css grid динамическое кол-во колонок с нефиксированной шириной
<!DOCTYPE html>
<html>

<head>
  <style>
    .items {
      display: grid;
      /* 
      это не подходит, потому-что надо указывать точное число (3, например), 
      те если item'ов будет больше они сползают на следующую строку
    */
      /* grid-template-columns: repeat(3, max-content); */

      /* это тоже не подходит, потому-что надо, чтобы размер был диначический, а не 100px */
      grid-template-columns: repeat(auto-fit, 100px);
      grid-column-gap: 10px;
    }

    .item {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <button class="button" type="button">gen</button>
  <div class="items"></div>
</body>
<script>
  const gen = () => Array.from({
    length: parseInt(Math.random() * 4) + 3
  }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
  const itemsEl = document.querySelector('.items')
  const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
  document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>


подможите, пож-та, сделать динамическое кол-во колонок с нефиксированной шириной каждой колонки,

т.е. надо избавиться от фиксированной ширины

grid-template-columns: repeat(auto-fit, 100px);

Последний раз редактировалось SuperZen, 29.11.2019 в 20:18.
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2019, 17:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,229

SuperZen,
а если flex?
<!DOCTYPE html>
<html>

<head>
    <style>
        .items {
            display: flex;

        }

        .item {
            background-color: lightgray;
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <button class="button" type="button">gen</button>
    <div class="items"></div>
</body>
<script>
    const gen = () => Array.from({
        length: parseInt(Math.random() * 4) + 3
    }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
    const itemsEl = document.querySelector('.items')
    const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
    document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 29.11.2019, 17:51
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 478

<style>
    .items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, max-content));
      grid-column-gap: 10px;
    }
</style>


вроде получилось... может все же есть другие варики, готов рассмотреть...
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2019, 17:51
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 478

рони, через flex понятно, хочу именно grid'ом...
Ответить с цитированием
  #5 (permalink)  
Старый 29.11.2019, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,229

SuperZen, на всякий случай если пример с html не [js run] а
[html run]
... минимальный код страницы с вашей проблемой
[/html]
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2019, 20:20
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 478

рони, то то думаю, что оно не запускается...
Ответить с цитированием
  #7 (permalink)  
Старый 01.12.2019, 07:32
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,170


<!DOCTYPE html>
<html>

<head>
  <style>
    .items {
      display: grid;
      justify-content: start;
      grid-auto-flow: column;
      grid-column-gap: 10px;
    }

    .item {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <button class="button" type="button">gen</button>
  <div class="items"></div>
</body>
<script>
  const gen = () => Array.from({
    length: parseInt(Math.random() * 4) + 3
  }, (_, i) => Math.random().toString(36).slice((parseInt(Math.random() * 7) + 2) * -1));
  const itemsEl = document.querySelector('.items')
  const genItems = () => itemsEl.innerHTML = gen().map(i => `<div class="item">${i}</div>`).join('')
  document.querySelector('.button').addEventListener('click', genItems)
</script>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как CSS таблицу из 8 колонок пребразовать в 3 колонки. sovsem-nub (X)HTML/CSS 2 20.05.2016 19:25