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.

Ajustar la altura del elemento a múltiplos de 100px.

18 Jul, 2023 Programación

Conseguí ajustar el ancho de un elemento a múltiplos de 100.

:root{--unit:100px;}
.grid{
    display:grid;
    gap:0;
    grid-template-columns: repeat( auto-fill, var(--unit) );
}
.grid-content { outline:4px solid #ccc; grid-column: 1 / -2; }

¿Cómo puedo lograr lo mismo en vertical (altura del elemento)? No tiene que ser una cuadrícula, puede ser cualquier cosa, siempre y cuando no sea JS.
Aquí está el código: https://codepen.io/szopos/pen/ZEXBWrg

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ajustar la altura de un elemento a un múltiplo de 100, puedes utilizar la propiedad CSS height con la variable CSS --unit establecida en 100px. Aquí tienes un ejemplo:

    :root {
  --unit: 100px;
}

.element {
  height: calc(var(--unit) * 5); /* la altura se ajusta a 500px (5 x 100px) */
}

    Puedes ajustar el valor del multiplicador según sea necesario para ajustar la altura a un múltiplo diferente. Alternativamente, podrías utilizar la propiedad min-height o max-height en lugar de height para permitir que el elemento tenga una altura dinámica dentro de un rango específico.

Comments are closed.