0

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>

2
  • El que debe llevar display: grid y gridtemplatecolumns: ... es .conteiner (no container .card) Commented el 19 abr. 2022 a las 21:08
  • Aqui tienes un buen tutorial para un responsive grid sin media queries: youtu.be/inVlqjPNmD8 (si quieres ir al grano en el minuto 16 aprox tienes la formulita del gridtemplatecolumns) Commented el 19 abr. 2022 a las 21:11

1 respuesta 1

0

Estas aplicando display en cada elemento .card cuando en realidad debe aplicarlo unicamente a su elemento contenedor.

body {
  width: 100vw;
  height: 100vh;
  background: url("imagen/background3.jpg");
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container{
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
  justify-content: space-around;
  width: 100%;
}
.container .card {
  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>

2
  • aah ahí si quedan centrados! pero de esta manera no quedan uno al lado del otro, osea como columnas, en pantalla grande. Yo buscaba que esten en columnas en computadoras y en filas en dispositivos de pantalla mas chica
    – danistor_m
    Commented el 20 abr. 2022 a las 2:50
  • para eso le recomiendo cambiar auto-fill por auto-fit, ya que auto-fill crea tantas columnas como espacio disponible tenga el cotenedor. tambien necesita establecer el ancho de su contenedor... edite la respuesta para que se adapte a lo que dice. Commented el 20 abr. 2022 a las 16:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.