Guia rápido para linhas automáticas de grade no Tailwind
Neste artigo, examinaremos o recurso Grid Auto Rows no Tailwind CSS . Este utilitário é usado para definir a altura das linhas implícitas em um contêiner de grade.
Grid Auto Rows permite que você defina o tamanho das linhas em uma grade que não foram explicitamente definidas.
Por padrão, o tamanho dessas linhas é determinado pelo conteúdo que elas contêm. No entanto, o recurso Grid Auto Rows permite especificar uma altura fixa para essas linhas ou misturar alturas fixas e automáticas.
Quando o número de itens da grade excede o número de linhas especificado pela propriedade grid-template-rows, a classe grid-auto-rows aplica um ou mais valores às linhas implícitas.
Classes de linhas automáticas de grade
| Aulas | Visão geral |
| auto-rows-auto | Isso é usado para definir a altura das linhas implícitas em um contêiner de grade como “auto”. A classe “auto-rows-auto” pode ajustar automaticamente a altura de linhas adicionais quando o número de itens da grade excede a propriedade grid-template-rows. |
| auto-rows-min | A classe auto-rows-min definirá a altura mínima das linhas implícitas para o valor especificado e, se o conteúdo da linha exigir mais altura, a linha será expandida para caber no conteúdo. O tamanho é especificado de acordo com o menor item no contêiner. |
| auto-rows-max | Nesta classe, é especificado um único valor que será aplicado às linhas implícitas que aparecem quando os itens da grade excedem as linhas de modelo de grade. A altura máxima de cada linha será definida de acordo com o maior item do contêiner. |
| auto-rows-fr | A classe auto-rows-fr no Tailwind CSS é usada para definir a altura das linhas implícitas em um contêiner de grade como uma fração do espaço livre no eixo de linha do contêiner de grade. Existe um intervalo [min, max] de tamanhos maiores ou iguais a min e menores ou iguais a max. |
Grade Auto Linhas Auto
Isso pode ser útil quando você tem quantidades variáveis de conteúdo em cada linha e deseja que as linhas sejam ajustadas de acordo.
Definir o tamanho da linha como automático significa que a altura da linha será ajustada com base no conteúdo dentro dela.
Sintaxe
<element class="auto-rows-auto">..</element>
Neste exemplo, nosso foco está na implementação da classe auto-rows-auto no Tailwind:
Example:
Linhas Automáticas da Grade Mín.
Definir uma altura mínima para as linhas pode ser útil quando você deseja garantir que as linhas tenham uma certa quantidade de espaço, mesmo que o conteúdo dentro delas seja mínimo.
Por exemplo, você pode querer criar uma grade com cartões de alturas variadas, mas deseja garantir que os cartões menores tenham uma altura mínima.
Sintaxe
<element class="auto-rows-min">..</element>
Este exemplo demonstra o funcionamento da classe auto-rows-min no Tailwind:
Example:
Máximo de Linhas Automáticas da Grade
Definir uma altura máxima para as linhas pode ser útil quando você deseja garantir que as linhas não fiquem muito altas e criem espaço em branco excessivo.
Por exemplo, você pode querer criar uma grade com cartões de alturas variadas, mas quer garantir que os cartões mais altos não ocupem muito espaço.
Sintaxe
<element class="auto-rows-max">..</element>
O exemplo a seguir destaca o caso de uso da classe auto-rows-max no Tailwind:
Example:
Para evitar isso, você pode definir a classe oculta de estouro no contêiner da grade.
Linhas Automáticas da Grade Fr
você pode usar a classe grid-auto-rows-fr para definir o tamanho das linhas como uma fração do espaço de grade disponível.
Definir tamanhos de linha usando frações pode ser útil quando você deseja criar uma grade onde as linhas têm um tamanho flexível que se ajusta com base no espaço disponível.
Sintaxe
<element class="auto-rows-fr">..</element>
Você também pode misturar diferentes tamanhos de linha usando frações e outras unidades.
Por exemplo, você pode definir uma linha para 2fr e outra para 100px para criar uma grade com tamanhos de linha flexíveis e fixos.
Além disso, você pode combinar a classe grid-auto-rows-fr com outras classes para criar layouts de grade mais complexos .
Este exemplo específico se concentra na classe auto-rows-fr no Tailwind:
