1

He estado intentando centrar el contenido de un contenedor grid (vaya la redundancia) sin embargo no lo he logrado. Lo que intento es que, tengo una columna con filas, las cuales son partidas por fracciones (1/7 para la primera fila, y 7/13 para la siguiente).

Hasta ahí todo bien, el problema radica cuando, el contenido de estas, queda desalineada, es decir, que una queda muy arriba y la otra muy abajo. (La parte de Academy y Skills). Muestro una imagen: Imagen del grid

h2 {
  font-size: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 90%;
  max-width: 1100px;
  height: 100%;
  margin: auto;
  gap: 15px;
  overflow: hidden;
  align-items: center;
}


.items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.item {
  margin: 20px 0;
  padding-left: 20px;
}

.academy {
  grid-column: 1/7;
}

.skills {
  grid-column: 7/13;
}
<section class="container">
        <div class="grid">
          <div class="academy">
            <h2 class="border text">Academy</h2>
            <div class="items">
              <article class="item">
                <h3 class="">Universidad Veracruzana</h3>
                <span>Agost 2015 - Febrero 2021</span>
                <ul>
                  <li>Licenciado en Tecnologias Computacionales</li>
                </ul>
              </article>
              <article class="item">
                <h3 class="">Platzi</h3>
                <span>Marzo 2020 - Actualidad</span>
                <ul>
                  <li>Escuela de Desarrolo Web</li>
                </ul>
              </article>
            </div>
          </div>

          <div class="skills">
            <h2 class="border text">Skills</h2>
            <div class="items">
              <article class="item">
                <ul>
                  <li>Creativo</li>
                </ul>
              </article>
              <article class="item">
                <ul>
                  <li>Creativo</li>
                </ul>
              </article>
              <article class="item">
                <ul>
                  <li>Creativo</li>
                </ul>
              </article>
              <article class="item">
                <ul>
                  <li>Creativo</li>
                </ul>
              </article>
            </div>
          </div>
        </div>
      </section>

6
  • Creo que es porque .skills tiene una altura menor que el otro div y la está centrando verticalmente. Creo que se soluciona cambiando esta parte: align-items: start;
    – imili
    Commented el 3 jun. 2021 a las 20:41
  • Tienes razón. La duda que tengo es ¿Cómo logro que ambas tengan la misma altura (y anchura). Para evitar que se muestren así :(
    – Edgar Gc
    Commented el 3 jun. 2021 a las 20:46
  • ¿Probaste cambiando eso que dije? Edité el comentario y quizás no llegaste a leer esa parte.
    – imili
    Commented el 3 jun. 2021 a las 21:01
  • 1
    Recién probé cambiándolo en el navegador con la opción de ejecutar y queda alineado. Quizás no entendí bien la pregunta. ¿Lo que buscás es que el encabezado "Academy" quede a la misma altura que "Skills"? Si es eso se soluciona cambiando align-items: center por align-items: start en .grid. Si no se soluciona con eso probablemente haya algún conflicto con otra regla que no figura en el código que compartiste.
    – imili
    Commented el 3 jun. 2021 a las 21:38
  • 1
    Si, era eso. Gracias por responder. Crea la respuesta para que de por cerrada mi pregunta, de favor. :D
    – Edgar Gc
    Commented el 3 jun. 2021 a las 21:43

1 respuesta 1

2

Habría que cambiar align-items: center; por align-items: start; en .grid para que no centre el contenido verticalmente.

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.