Dynami c количество столбцов в сетке CSS - PullRequest
Новая
       11

Dynami c количество столбцов в сетке CSS

0 голосов
/ 29 марта 2020

Я действительно изо всех сил пытаюсь обернуть свою голову вокруг сетки CSS.

У меня есть отсортированный список из 95 элементов, и я хочу отобразить их в виде кнопок в порядке столбцов. Я хотел бы сделать 24 в каждом столбце, кроме последнего, который будет отображать двадцать три.

Однако у меня также есть функция фильтрации, которая отфильтровывает элементы, которые не соответствуют данному префиксу. В случае, если осталось только количество элементов в столбце (<= 24), я хочу, чтобы кнопки охватывали всю ширину. Как я могу сделать это с сеткой css? Я пропустил фактическую функцию фильтрации, которая есть в моем коде, но вы можете увидеть желаемый эффект, заменив объект 'languages' объектом 'FilterLanguages'. </p>

https://codesandbox.io/s/falling-microservice-cdi00

import React from "react";
import "./styles.css";
import styled from "styled-components";

const StyledGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  & > button {
    text-align: left;
    padding-left: 20px;
    background-color: #fff;
  }
`;

export default function App() {
  return (
    <div>
      <StyledGrid>
        {Object.keys(languages).map(language => (
          <button> {language} </button>
        ))}
      </StyledGrid>
    </div>
  );
}

const filteredLanguages = {
  Azerbaijan: "az",
  Albanian: "sq",
  Amharic: "am",
  Arabic: "ar",
  Armenian: "hy",
  Afrikaans: "af"
};

const languages = {
  Azerbaijan: "az",
  Albanian: "sq",
  Amharic: "am",
  English: "en",
  Arabic: "ar",
  Armenian: "hy",
  Afrikaans: "af",
  Basque: "eu",
  German: "de",
  Bashkir: "ba",
  Nepali: "ne",
  Bengali: "bn",
  Belarusia: "be",
  Burmese: "my",
  Bulgarian: "bg",
  Bosnian: "bs",
  Welsh: "cy",
  Hungarian: "hu",
  Vietnamese: "vi",
  Haitian: "ht",
  Galician: "gl",
  Dutch: "nl",
  "Hill-Mari": "mrj",
  Greek: "el",
  Georgian: "ka",
  Gujarati: "gu",
  Danish: "da",
  Hebrew: "he",
  Yiddish: "yi",
  Indonesian: "id",
  Irish: "ga",
  Italian: "it",
  Icelandic: "is",
  Spanish: "es",
  Kazakh: "kk",
  Kannada: "kn",
  Catalan: "ca",
  Kyrgyz: "ky",
  Chinese: "zh",
  Korean: "ko",
  Xhosa: "xh",
  Khmer: "km",
  Laotian: "lo",
  Latin: "la",
  Latvian: "lv",
  Lithuanian: "lt",
  Luxembourgish: "lb",
  Malagasy: "mg",
  Malay: "ms",
  Malayalam: "ml",
  Maltese: "mt",
  Macedonia: "mk",
  Maori: "mi",
  Marathi: "mr",
  Mari: "mhr",
  Mongolian: "mn",
  Norwegian: "no",
  Punjabi: "pa",
  Papiamento: "pap",
  Persian: "fa",
  Polish: "pl",
  Portuguese: "pt",
  Romanian: "ro",
  Russian: "ru",
  Cebuano: "ceb",
  Serbian: "sr",
  Sinhala: "si",
  Slovakian: "sk",
  Slovenian: "sl",
  Swahili: "sw",
  Sundanese: "su",
  Tajik: "tg",
  Thai: "th",
  Tagalog: "tl",
  Tamil: "ta",
  Tatar: "tt",
  Telugu: "te",
  Turkish: "tr",
  Udmurt: "udm",
  Uzbek: "uz",
  Ukrainian: "uk",
  Urdu: "ur",
  Finnish: "fi",
  French: "fr",
  Hindi: "hi",
  Croatian: "hr",
  Czech: "cs",
  Swedish: "sv",
  Scottish: "gd",
  Estonian: "et",
  Esperanto: "eo",
  Javanese: "jv",
  Japanese: "ja"
};
...