Tengo éstas cards que están una al lado de la otra y logré centrarlas. También quería hacerlo responsive y que se colocaran una debajo de la otra al hacer más pequeña la pantalla, y esto quería hacerlo con grid, sin usar media querys.
Hasta ahí todo bien, el problema es que al hacer más pequeña la pantalla, las cards dejan de estar centradas en el viewport. Pasan a arrimarse todas hacia la izquierda. ¿Me podrían explicar cómo es que se hace para que queden centradas?
En lo posible quiero hacer siempre uso de grid y no de mediaquerys
.
body {
width: 100vw;
height: 100vh;
background: url("imagen/background3.jpg");
display: flex;
flex-direction: column;
align-items: center;
}
.container .card {
display: inline-grid;
/*Los pongo uno al lado del otro y hago que actuen como inline, no blocks. No van a ocupar todo el ancho de la pantalla y va a haber un espacio entre ellas*/
grid-template-columns: repeat(auto-fill (minmax(min(100%, 25rem), 1fr)));
font-family: roboto;
border-radius: 18px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
height: fit-content;
}
.card-text {
margin: 2em;
}
<body>
<header>
<h1>
Figuras geométricas
</h1>
</header>
<div class="container">
<div class="card">
<div class="card-text">
<section>
<h2>Calcula el área y perímetro de un cuadrado</h2>
<form>
<label for="InputCuadrado">
Escribe cuánto mide cada lado de tu cuadrado:<br>
</label>
<input id="InputCuadrado" <button type="button" onclick="calcularPerimetroCuadrado()"> Calcular el perímetro
</button>
<button type="button" onclick="calcularAreaCuadrado()">
Calcular el área
</button>
</form>
</section>
</div>
</div>
<div class="card">
<div class="card-text">
<section>
<h2>Calcula el área y perímetro de un triangulo</h2>
<form>
<label for="InputTrianguloA InputTrianguloB InputTrianguloBase">
Escribe cuánto mide cada lado de un triangulo:<br>
</label>
<input id="InputTrianguloA" placeholder="lado A" type="number" /><br>
<input id="InputTrianguloB" placeholder="lado B" type="number" /><br>
<input id="InputTrianguloBase" placeholder="Base" type="number" /><br>
<button type="button" onclick="calcularPerimetroTriangulo()">
Calcular el perímetro
</button>
<button type="button" onclick="calcularAreaTriangulo()">
Calcular el área
</button>
</form>
</section>
</div>
</div>
</div>
<script src="./figuras.js"></script>
</body>