es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

MudBlazor grid: alinear la altura de cada fila

29 Jul, 2023 Programación

Tengo este MudGrid con 4 elementos MudCard con contenido y altura dinámicos.

<mudgrid>
    <muditem xs="12">
        <mudgrid>
            <muditem xs="6">
                <mudcard>
                    <mudcardcontent>
                        Linea1<br>
                        Linea1<br>
                        Linea1<br>
                    </mudcardcontent>
                </mudcard>
            </muditem>
            <muditem xs="6">
                <mudcard>
                    <mudcardcontent>
                        Linea1<br>
                        Linea1<br>
                    </mudcardcontent>
                </mudcard>
            </muditem>
            <muditem xs="6">
                <mudcard>
                    <mudcardcontent>
                        Linea1<br>
                        Linea1<br>
                        Linea1<br>
                    </mudcardcontent>
                </mudcard>
            </muditem>
            <muditem xs="6">
                <mudcard>
                    <mudcardcontent>
                        Linea1<br>
                    </mudcardcontent>
                </mudcard>
            </muditem>
        </mudgrid>
    </muditem>
</mudgrid>

Disponible en esta URL:
https://try.mudblazor.com/snippet/mOclFQwNJgFhMuBf

Interfaz de cuadrícula

¿Es posible que la altura de cada MudCard esté alineada en la misma línea/fila?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible tener la altura de cada MudCard en la misma línea/fila alineada. Una forma de lograr esto es estableciendo la altura fija del MudCardContent, lo cual asegurará que todas las MudCards en la fila tengan la misma altura. Por ejemplo:

    <mudcardcontent style="height: 100px;">
    Línea1<br>
    Línea1<br>
    Línea1<br>
</mudcardcontent>

    Alternativamente, podrías usar una clase de CSS personalizada para definir la altura del MudCardContent y aplicarla a todas las MudCards en la fila de la siguiente manera:

    .custom-card-content {
    height: 100px;
}

...

<mudcardcontent class="custom-card-content">
    Línea1<br>
    Línea1<br>
    Línea1<br>
</mudcardcontent>

    Ambos enfoques asegurarán que todas las MudCards en la fila tengan la misma altura, lo que resultará en un diseño visualmente alineado.

Comments are closed.