Сетка 3x3 не должна быть такой сложной [дубликат] ⇐ CSS

[Anonymous]

Выглядит не так, как ожидалось:

.cont { дисплей: сетка; строки-шаблона сетки: 33% 33% 33%; столбцы-шаблона сетки: 33% 33% 33%; } .cont > div { контур: 1 пиксель, сплошной красный; ячейка 1ячейка 2ячейка 3 ячейка 4ячейка 5ячейка 6 ячейка 7ячейка 8ячейка 9

Поэтому очевидно, что ожидаемым результатом будут сетка из равных квадратов, похожая на крестики-нолики. Однако высота выравнивается по содержимому каждого div, у меня их 9. Я пробовал все, устанавливая высоту 100% в контейнере и отдельных элементах, она всегда выравнивается независимо от содержимого. Проблема в том, что разные квадраты могут быть пустыми или содержать контент в разное время. Если я установлю определенную высоту в строках, например. 250px работает нормально, но с процентами почему-то не работает. Мне просто нужно 9 равных квадратов независимо от высоты и ширины браузера в пикселях. Казалось бы, это не так уж и сложно.