Perguntas com a marcação «css-grid»

Estou tentando criar uma página simples com CSS Grid. O que não estou conseguindo fazer é centralizar o texto do HTML para as respectivas células da grade. Eu tentei conteúdo colocação em separado divs tanto dentro como fora do left_bge right_bgseletores e brincando com algumas das propriedades CSS sem sucesso. …

179 html  css  centering  css-grid 

TL; DR: Existe algo parecido table-layout: fixedcom grades CSS? Tentei criar um calendário de exibição do ano com uma grande grade 4x3 durante os meses e aninhar grades 7x6 durante os dias. O calendário deve preencher a página, para que o contêiner da grade do ano tenha uma largura e …

153 css  grid-layout  css-grid 

Preciso implementar um layout de alvenaria bastante comum. No entanto, por várias razões, não quero usar JavaScript para fazer isso. Parâmetros: Todos os elementos têm a mesma largura Os elementos têm uma altura que não pode ser calculada no lado do servidor (uma imagem mais várias quantidades de texto) Eu …

134 html  css  flexbox  css-grid 

É possível fazer um envoltório de grade CSS sem usar consultas de mídia? No meu caso, tenho um número não determinístico de itens que desejo colocados em uma grade e quero que essa grade seja quebrada. Usando o Flexbox, não consigo espaçar bem as coisas de maneira confiável. Eu gostaria …

126 html  css  css-grid 

Percebi que isso é impossível de se conseguir usando o Flexbox, já que cada linha pode ter apenas a altura mínima necessária para ajustar seus elementos, mas isso pode ser alcançado usando o CSS Grid mais recente? Para ser claro, eu quero altura igual para todos os elementos em uma …

99 css  flexbox  grid-layout  css-grid 

Estou tentando centralizar os elementos internos de uma <button>-tag com o do flexbox justify-content: center. Mas o Safari não os centraliza. Posso aplicar o mesmo estilo a qualquer outra tag e funciona como planejado (consulte a <p>-tag). Apenas o botão é alinhado à esquerda. Experimente o Firefox ou o Chrome …

91 html  css  safari  flexbox  css-grid 

No exemplo a seguir, o círculo se adapta à largura da grade e mantém sua proporção. À medida que a largura do recipiente diminui, os círculos diminuem com ele ... Porém, quando a altura é menor que a largura (segunda caixa), o círculo não diminui as sobreposições fora da grade. …

8 html  css  svg  css-grid  aspect-ratio