Cuándo usar Flexbox y CSS Grid en diseño web

Clase 11 de 28 • Curso de Diseño Web con CSS Grid y Flexbox

Clase anteriorSiguiente clase

Edgar Lopez Arroyo

student•

Definitivamente para conocer mejor estas herramientas no hay como practicar y probar. :D

Giselly Romero Nuñez

student•

No veo falla en tu lógica 🤓

Omar Gabriel Aguilar Moscoso

student•

100% TRUE

Eliseo Ávila

student•

CSS Grid y Flexbox....

Javier Fuentes Mora

teacher•

queremos el codigo jajaja

Eliseo Ávila

student•

Javier Fuentes Mora acá te dejo el código, puedes reemplazar las imágenes por las de tu preferencia.

HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <header>
            <!-- imagen insertada por css como background -->
        </header>
        <section>
            <div class="img_card">
            </div>
            <div class="title_card">
                <h2>Tokyo</h2>
                <img class="img_title_card" src="img/check.png" alt="">
            </div>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </section>
        <footer>
            <ul class="nav_footer">
                <li>Settings</li>
                <li>Profile</li>
                <li>Favorites</li>
            </ul>
        </footer>
    </main>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100vh;
    background: darkgray;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 100px);
    width: 400px;
    height: 500px;
    justify-items: center;
    background: whitesmoke;
}

header {
    width: 100%;
    height: 150px;
    grid-column: 1 / 7;
    background-image: url(./img/japon-primavera.jpg);
    background-position: center;
    background-size: cover;
}

section {
    display: grid;
    grid-column: 1 / 7;
    grid-row: 2 / 5;
    justify-items: center;
    width: 100%;
}

.img_card {
    width: 250px;
    height: 200px;
    border-radius: 15px;
    background-image: url(./img/tokyo.jpg);
    background-position: center;
    background-size: cover;
}

.title_card {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.img_title_card {
    margin-left: 10px;
}

p {
    color: lightslategray;
}

footer {
    display: grid;
    grid-column: 1 / 7;
    grid-row: 5 / 6;
    width: 100%;
    justify-items: center;
    align-content: center;
}

ul li {
    list-style: none;
    background: rgb(223, 223, 223);
    padding: 10px 20px;
    border-radius: 20px;
    color:rgb(75, 75, 75);
    font-size: 12px;
}

.nav_footer {
    display: flex;
    justify-content: space-between;
    width: 80%;
}

Giselly Romero Nuñez

student•

 Mis 3 mejores amigos:
1- El Inspector
2- La Practica
3- La Paciencia

Omar Gabriel Aguilar Moscoso

student•

La trifecta de un Desarrollador. Gran APORTE Giselley

David Tomé

student•

El buen triunvirato.

Obed Ulises Orta Aguilar

student•

A mi lo que más me ha costado es decidir como dividir la grilla para usar Css Grid, creo que te da mayor libertad para hacer mejores diseños. He aquí un ejemplo

Ángela Milena Sabogal González

student•

ayudame, como puedo poner imagenes aqui en los comentarios?

Obed Ulises Orta Aguilar

student•

Hola amsabogal61 Solo arrastra la imagen que necesites a la caja de comentario y con eso se sube la imagen

Maria Paulina Arenas Agudelo

student•

Al momento de implementar, crear tareas para la creación de componentes en este ejemplo serían:

Crear la grid principal.
Crear la grid de los hijos.
Crear 3 tipos de cards
Ubicar cards

Oswaldo Trejo

student•

Teniendo en cuenta que es a libre uso: Flexbox = componentes de escala pequeña. Grid = componentes de escala más grandes como layout.

Luis Alejandro Vera Hernandez

student•

Flexbox = componentes de escala pequeña. Grid = componentes de escala más grandes como layout.

Al momento de implementar, crear tareas para la creación de componentes:

Crear la grid principal.
Crear la grid de los hijos.
Crear 3 tipos de cards
Ubicar cards

Jonh Pertuz pertuz

student•

Realice este ejercicio que pille en youtobe, son unas cards responsive con css grid

GitHub: https://github.com/JohnDeev/CardsBeersCssGrid

jose manuel osorio

student•

como lograste hacer esos recortes en las imagenes?

Cayo Legal

student•

@jmblack18 según vi es esta propiedad

clip-path: polygon(0 0,100% 0,100% 85%,0 100%);

Carlos Eduardo Gomez García

teacher•

"Uyyyyy no, chale vato, hiciste este diseño con CSS Gid y yo vi en el curso de Flexbox y CSS Grid que dijo teff que no se podía hacer con CSS Grid... Rechazado!" Jajaja me imaginé a alguien en una situación así xD . Me encanta la posibilidad que tiene CSS para hacer cualquier cosa, el diseño 4 también se pudo haber hecho con positions, es una gran variedad de posibilidades las que tenemos:3

Luis E. Gama Ramirez

student•

Es un tema que da paso a un debate, pero igual hay que decir que el enfoque y la manera de resolver problemas como programadores difiere mucho.

Tu lo podrias hacer con Flex y yo con Grid, y los dos estan bien. Pero como tu te acomodas con el otro lo cambiaras y esta bien !... Jaja DIlemas.

Sebastian Heredia

student•

¡Que genial! Ya no sufriré en la decisión de como hacer las cosas! :D

Irving Juárez

student•

Se pueden hacer los diseños con cualquier método. Lo importante es saber con cual te llevas mejor... En lo personal, me gusta el flexbox

Patricio Manuel Ugarte

student•

Recomiendo este workshop de la plataforma Egghead, donde se va armando una Landing Page paso a paso, utilizando Grid y Flexbox. La instructora muestra muy buenas prácticas y va explicando cómo y por qué usa cada tipo de display.

Nicolas ortiz suarez

student•

En un grid item puedo usar flexbox como padre?

Estefany Aguilar

teacher•

Hola Nicolas ! Excelente tu pregunta 💚

Sí, un hijo de grid puede ser padre flex 😊

Te comparto un codepen que hice para ti: https://codepen.io/teffcode_/pen/RwKvXaN

Su código por si algo:

HTML

<div class="grid-parent">
   <div class="grid-child-one flex-parent">
     <span class="flex-child">Holi</span>
     <span class="flex-child">Nicolás</span>
   </div>
   <div class="grid-child-two"></div>
</div>

CSS:

.grid-parent {
  background: papayawhip;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 2fr);
  height: 200px;
}

.grid-child-one {
  background: hotpink;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.grid-child-two {
  background: turquoise;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.flex-parent {
  display: flex;
  flex-direction: column;
}

.flex-child {
  background: pink;
  border: 1px solid white;
}

Cuéntame si quedó resuelta tu duda ! 💚

Nicolas ortiz suarez

student•

Ah claro, perfecto. Ahora lo entiendo mejor. Muchas gracias profe.

Juan Pablo Ospina Restrepo

student•

Realmente ha sido para mi muy difícil CSS pero a sido por mi propia culpa, ya que esto requiero de mucha practica gracias a grandes profesores/as como @teffcode se hace mas fácil entender los conceptos, solo hace falta de nuestra parte hacer la practica.

Brandon Argel Verdeja Domínguez

student•

Uff yo ya estaba acostumbrado a flexbox pero con grid puedes "Automatizar" algunas cosas en tu página y con mucho menos código, creo que intentaré implementar css grid en la estructura y responsive design y el flex en el acomodo y diseño 😄

Pedro Moreno

student•

Que recomiendan para posicionar elementos así, que sobresalen de su contenedor?

Camilo Gonzalez

student•

Yo utilizo la propiedad position. Al elemento contenedor se le asigna relative, para que el hijo se posicione respecto a este y no a la pagina completa. Por su parte el hijo (el casco) se le asigna absolute. De esa forma puedes usar en el elemento hijo las propiedades top, right, bottom y left para posicionarlo. En este caso puede ser un left: 2rem y un top: -2rem.

Pedro Moreno

student•

Muchas gracias por la respuesta Camilo!

David Eduardo Perez Hernandez

student•

Llego el momento de hacer para aprender... realmente se vuelve una cuestión de método personal, aunque estoy de acuerdo en que un grid es mejor para agrupar varios objetos y flex para diseños mas sencillos. Pero claro que si tuviéramos una landing page muuy sencilla la podríamos hacer con unas cuantas cajitas y usar flex.

Eduardo Reyes

student•

Existe alguna propiedad en grid o alguna forma de agregar una línea o borde entre los items, que no sea agregar un clase a todos los items de la grilla para agregarles el borde. Así como se ve en esta imágen.

Angel David Osorio Leyva

student•

Lamentablemente no. No hay manera de darle estilos a las grid lines. Toca usar clases y eso para lograr los estilos requeridos.

Estefany Aguilar

teacher•

Eduardo ! Nadaaa 😩 No existe aún !

Andres Velasquez

student•

Comparto este video donde pueden entender un poco mas de CSS grid y flexbox y sobre todo, practicar.

Practica CSS

Luis Felipe Correa Agudelo

student•

siento que ha bajado el nivel de los cursos es mi impresión sobre todo los de css, cursos conversacionales le pierden la chispa a la creatividad.

Pedro Ramirez

student•

asi es.

Juan Pablo Rios Guevara

student•

Grid - Flexbox

Henry Jeffersson Salinas Arenas

student•

bro siempre pon codigo

Pedro Ramirez

student•

Tampoco es para decir "siempre pon el codigo" no hay que ser orgullosos y mandar a poner codigo a alguien que no tiene por obligacion hacerlo, saludos.