CSS равное количество столбцов в каждой строке для адаптивного дизайна - PullRequest
Новая
       56

CSS равное количество столбцов в каждой строке для адаптивного дизайна

0 голосов
/ 28 сентября 2019

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

На больших экранах будет одна строка, подобная этой: enter image description here

На ноутбуке будет так: enter image description here

На планшетах или экранах меньшего размера будет так: enter image description here

Я исправил медиазапросы для определенных экранов, но возникают проблемы, если пользователь изменяет размеры окна (хочет видеть несколько окон одновременно).Сложно задавать десятки медиа-запросов.Я ищу более общее решение.

Вот что я не хочу видеть на моем сайте: enter image description here enter image description here

Это фрагмент, над которым я работаю.Я пробовал использовать гибкий и сеточный подходы, но безуспешно. 

   insertButtons("flex-container")
            insertButtons("grid-container")

            function insertButtons(containerId) {
                let container = document.getElementById(containerId)
                let number = 36
                var i;
                for (i = 0; i < number; i++) {
                    let button = document.createElement("button")
                    button.innerHTML = i+1
                    if (containerId == "flex-container") {
                        button.classList.add("element-button")
                    }
                    container.appendChild(button)
                }
            }
.container {
                background: black;
                position: relative;
                margin-top: 20px;
                width: 96vw;
                left: 50%;
                transform: translate(-50%, 0);
                padding: 5pt;
            }
            
            #flex-container { 
                display: flex;
                flex-wrap: wrap; 
            }

            #grid-container { 
                padding: 5pt;
                background: black;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(32pt, 1fr));
                grid-auto-rows: 30pt;
                grid-gap: 3pt; 
            }

            .element-button {
                margin: 2pt;
                padding: 2pt;
                flex-grow: 1;
                height: 30pt;
                min-width: 20pt;;
            } 

            button {
                border-radius: 3pt;
                font-size: 1.2em;
            }
   <h1 align="center">Flex</h1>
       <div id="flex-container" class="container"></div>
        <h1 align="center">Grid</h1>
        <div id="grid-container" class="container"></div>

Спасибо!

...