La única manera de que todo esto sea tan fácil como parece es practicando.
Descubre qué ha cambiado en nuestro medio
Todo sobre el diseño de páginas web acaba de cambiar
Conceptos que forman parte del diseño en CSS
La importancia de recordar las herramientas existentes
Flujo normal del documento: display block, inline e inline-block
Contextos de formato: Formato de Contexto de Bloque (BFC)
Posicionamiento + Dinámica: ¿Cómo se vería?
¿Flexbox o CSS Grid?
Diferencias entre Flexbox y CSS Grid
Similitudes entre Flexbox y CSS Grid
¿Puedo trabajar con Flexbox y CSS Grid al tiempo?
Dinámica: ¿Qué usarías? (Parte 1)
Dinámica: ¿Qué usarías? (Parte 2) + Reto
¿Cuándo usar Flexbox y cuándo usar CSS Grid?
Modern Layouts con CSS Grid
¿Qué son los Modern CSS Layouts?
Patrones para usar como punto de partida
Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout
Layouts: 12-Span Grid, RAM (Repeat, Auto, MinMax), Line Up, Clamping My Style, Respect for Aspect
Diseño web para desarrolladores
Dinámica: No puedo dejar de ver
Design System y detalles visuales a tener en cuenta
Tendencias de diseño UI/UX: Fase de inspiración y creatividad
Wireframes y comunicación visual simple, intuitiva y atractiva
Figma para devs: Auto Layout y Neumorphism (Parte 1)
Figma para devs: Auto Layout y Neumorphism (Parte 2)
Del diseño al código
Primeros pasos y estructura inicial
Ubicación y creación de elementos
El futuro de CSS Grid
Entendiendo las versiones de CSS: ¿existirá CSS4?
CSS Subgrid
Native CSS Masonry Layout
CSS feature queries: @supports
Nosotros y el futuro de la web: tips para seguir aprendiendo y mantenerse al día
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout
14/28Recursos
Aportes 22
Preguntas 3
Ordenar por:
Deconstructed pancake usa la propiedad flex y sus valores son grow, shrink y basis.
Flex-grow ocupa equitativamente en cada elemento el espacio sobrante.
Flex-basis establece un ancho alto de cada item, va a ser alto o ancho dependiendo la dirección en que este.
Flex-shrink especifica el valor de contracción de un elemento, cuanto va a reducir.
Super Centered
HTML
<!DOCTYPE html>
<html lang="en">
<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>Super centered</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child">:)</div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
.parent {
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
background-color: aqua;
}
.child {
height: 50px;
width: 20px;
display: grid;
place-items: center;
background-color: blueviolet;
font-size: 1.2rem;
font-weight: bold;
}
Sidebar Says
HTML
<!DOCTYPE html>
<html lang="en">
<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>Sidebar Says</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="sidebar">min: 150 / max: 25%</div>
<div class="element">Takes the second grid position</div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
.parent {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
.sidebar, .element {
display: grid;
place-items: center;
font-size: 1.2rem;
font-weight: bold;
}
.sidebar {
background-color: yellow;
}
.element {
background-color: palevioletred;
}
The Deconstructed Pancake
HTML
<!DOCTYPE html>
<html lang="en">
<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>Deconstructed pancake</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
.parent {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
flex: 0 1 300px;
display: grid;
place-items: center;
margin: 15px;
background-color: aqua;
font-size: 1.2rem;
font-weight: bold;
}
Holy Grail Layout
HTML
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="./style.css" />
<title>Holy Grail Layout</title>
</head>
<body>
<header class="header">Header</header>
<aside class="leftSidebar">Left Sidebar</aside>
<main class="main">Main Content</main>
<aside class="rightSidebar">Right Sidebar</aside>
<footer class="footer">Footer</footer>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
height: 100vh;
font-size: 1.6rem;
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
.header,
.footer {
grid-column: 1/6;
padding: 2rem;
text-align: center;
font-size: 2rem;
font-weight: bold;
background-color: blueviolet;
color: white;
}
.leftSidebar {
grid-column: 1/2;
text-align: center;
font-size: 2rem;
font-weight: bold;
padding: 2rem;
background-color: brown;
color: white;
}
.main {
grid-column: 2/3;
text-align: center;
font-size: 2rem;
font-weight: bold;
padding: 2rem;
}
.rightSidebar {
grid-column: 3/4;
text-align: center;
font-size: 2rem;
font-weight: bold;
padding: 2rem;
background-color: brown;
color: white;
}
“Classic Holy Grail Layout” es necesario ponerle nombre a todo? XD
les recomiendo ver el curso de css grid
Holy Grail
HTML
<!DOCTYPE html>
<html lang="en">
<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>Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<header>Header</header>
<section class="left-sidebar">Left Sidebar</section>
<main>Main</main>
<section class="right-sidebar">Right Sidebar</section>
<footer>Footer Content</footer>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
.parent {
height: 100vh;
width: 100vw;
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
header, main, .left-sidebar, .right-sidebar, footer {
font-size: 1.8rem;
font-weight: bold;
}
header {
grid-column: 1 / 4;
background-color: yellow;
}
.left-sidebar {
grid-column: 1 / 2;
background-color: coral;
}
main {
grid-column: 2 / 3;
background-color: palevioletred;
}
.right-sidebar {
grid-column: 3 / 4;
background-color: greenyellow;
}
footer {
grid-column: 1 / 4;
background-color: cadetblue;
}
**Classic Holy Grail Layout explicado en video**: (tiktok)
⭐Enlace : <https://www.tiktok.com/@raulsanchezcode/video/7322945161183399173?is_from_webapp=1&sender_device=pc&web_id=7315500903305823750>
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_
**Una card elaborada desde cero: (youTube)**
⭐Enlace :
<https://www.youtube.com/watch?v=gLCgh7zHID4&t=4s>
maravillado con el Santo Grial jjjj
Flex tiene una propiedad flex xd
wow es impresionante
14. Layouts: Super Centered, The Deconstructed Pancake, Sidebar Says, Pancake Stack, Classic Holy Grail Layout
-
Super Centered: Por mas que movamos la pantalla no se nos va a quitar del centro, tanto vertical como horizontalmente.
.parent { display: grid; place-items: center; } -
The Deconstructed Pancake: Reorganiza los contenedores de manera responsive, pasando de un diseño para desktop a uno para mobile. Esto se logra con 👉
flex: grow shrink base-width; crecer, encoger y ancho base;-
Flex-grow ocupa equitativamente en cada elemento el espacio sobrante.
-
Flex-basis establece un ancho alto de cada item, va a ser alto o ancho dependiendo la dirección en que este.
-
Flex-shrink especifica el valor de contracción de un elemento,cuánto va a reducir.
.parent { display: flex; flex-wrap: wrap; justify-content: center; }.box { flex: 0 1 150px; margin: 5px; } -
-
Sidebar Says:
.parent { display: grid; grid-template-columns: minmax(150px, 25%) 1fr; } -
Pancake Stack:
.parent { display: grid; grid-template-rows: auto 1fr auto; } -
Classic Holy Grail Layout:
.parent { display: grid; grid-template: auto 1fr auto / auto 1fr auto; }.header { padding: 2rem; grid-column: 1 / 4; }.left-side { grid-column: 1 / 2; }
También puedes revisar estos ejemplos mas a detalle aquí y aquí también
🎲
Bueno, con estos layouts de ejemplo se nos facilita un poco la visualizacion para diseño de sitios web con las tecnologias dadas.
A pesar de que todos tendrian su caso de uso, el mas versatil se me hace que es el de pancake
Estado 2021 de CSS
https://2021.stateofcss.com/en-US/features/layout/#grid
![](
![](
Deconstructed Pancake.
<<!DOCTYPE html>
<html lang="en">
<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>The Deconstructed Pancake</title>
<style>
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main .box {
flex: 0 1 150px;
margin: 5px;
background-color: Blue
;
font-size: 2rem;
height: 100px;
display: grid;
place-items: center;
border-radius: 10px;
}
</style>
</head>
<body>
<main class="main">
<section class="box">A1</section>
<section class="box">B2</section>
<section class="box">C3</section>
</main>
</body>
</html>>
Espero que les sirva 😃
Super centered:
<!DOCTYPE html>
<html lang="en">
<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>Super Centered</title>
<style>
.main {
display: grid;
place-items: center;
background-color: aqua;
width: 90vw;
height: 90vh;
}
.section {
background-color: coral;
width: fit-content;
padding: 20px;
font-size: 2rem;
border-radius: 20px;
}
</style>
</head>
<body>
<main class="main">
<section class="section">:)</section>
</main>
</body>
</html>
The Deconstructed Pancake:
<!DOCTYPE html>
<html lang="en">
<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>The Deconstructed Pancake</title>
<style>
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main .box {
flex: 0 1 150px;
margin: 5px;
background-color: greenyellow;
font-size: 2rem;
height: 100px;
display: grid;
place-items: center;
border-radius: 10px;
}
</style>
</head>
<body>
<main class="main">
<section class="box">1</section>
<section class="box">2</section>
<section class="box">3</section>
</main>
</body>
</html>
Sidebar Says:
<!DOCTYPE html>
<html lang="en">
<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>Sidebar Says</title>
<style>
.main {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
.main section {
height: 600px;
font-size: 1.3rem;
}
.main .left {
background-color: papayawhip;
}
.main .right {
background-color: darkslateblue;
color: white;
}
</style>
</head>
<body>
<main class="main">
<section class="left">lorem</section>
<section class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium neque, et nesciunt fugit magni, deserunt possimus minima magnam quia corrupti est dicta voluptatum necessitatibus corporis impedit quis exercitationem itaque. Omnis?</section>
</main>
</body>
</html>
Pancake Stack:
<!DOCTYPE html>
<html lang="en">
<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>Pancake Stack</title>
<style>
body {
display: grid;
grid-template-rows: auto 1fr auto;
height: 90vh;
}
body .header {
background-color: aqua;
}
body .main {
background-color: coral;
}
body .footer {
background-color: blueviolet;
}
</style>
</head>
<body>
<header class="header">Header</header>
<main class="main">Main</main>
<footer class="footer">Footer Content</footer>
</body>
</html>
Holy Grail:
<!DOCTYPE html>
<html lang="en">
<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>Holy Grail</title>
<style>
body {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
height: 90vh;
font-size: 1.3rem;
}
body .header,
body .footer {
padding: 2rem;
grid-column: 1 / 4;
}
body .header {
background-color: hotpink;
}
body .left,
body .main,
body .right {
text-align: center;
}
body .left {
grid-column: 1 / 2;
background-color: darkturquoise;
}
body .main {
grid-column: 2 / 3;
background-color: tomato;
}
body .right {
grid-column: 3 / 4;
background-color: bisque;
}
body .footer {
background-color: chartreuse;
}
</style>
</head>
<body>
<header class="header">Header</header>
<section class="left">Left</section>
<main class="main">Main</main>
<section class="right">Right</section>
<footer class="footer">Footer</footer>
</body>
</html>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?