Merge pull request #530 from Lemoncode/feature/#529-layout-css_grid

[#529]: Update css grid examples
Lemoncode · Apr 27, 2023 · c2b5639 · c2b5639
2 parents 74a5edc + 1d02f2f
commit c2b5639
Show file tree

Hide file tree

Showing 30 changed files with 1,306 additions and 830 deletions.
diff --git a/01-layout/03-grid-css/00-hello-css-grid/README.md b/01-layout/03-grid-css/00-hello-css-grid/README.md
@@ -0,0 +1,41 @@
+# Hello CSS Grid
+
+Vamos a empezar abriendo el Visual Studio para empezar a jugar.
+
+Y ahora creamos este Html:
+
+```diff
+<head>
+<title>Parcel Sandbox</title>
+<meta charset="UTF-8" />
++ <link rel="stylesheet" type="text/css" href="./src/styles.css" />
+</head>
+<body>
++ <div class="grid-container">
++   <div class="item">1</div>
++   <div class="item">2</div>
++   <div class="item">3</div>
++   <div class="item">4</div>
++   <div class="item">5</div>
++   <div class="item">6</div>
++ </div>
+</body>
+```
+
+E indicamos al contenedor que es un display grid:
+
+```css
+.grid-container {
+  display: grid;
+}
+```
+
+Bueno... no es muy elegante, Que pasa?
+
+Las herramientas de desarrollo de Chrome tienen un buen soporte para CSS Grid, abrámoslo y comprobemos qué tenemos:
+
+![DevTools grid support](./content/devtoolshello.png)
+
+Por defecto tenemos una columan con 6 filas.
+
+Es hora de empezar a configurar :)
diff --git a/01-layout/03-grid-css/00-hello-css-grid/content/devtoolshello.png b/01-layout/03-grid-css/00-hello-css-grid/content/devtoolshello.png
diff --git a/01-layout/03-grid-css/01-grid-css-fundamentals/README.md b/01-layout/03-grid-css/01-grid-css-fundamentals/README.md
diff --git a/01-layout/03-grid-css/01-grid-css-fundamentals/index.html b/01-layout/03-grid-css/01-grid-css-fundamentals/index.html
diff --git a/01-layout/03-grid-css/01-grid-css-fundamentals/style.css b/01-layout/03-grid-css/01-grid-css-fundamentals/style.css
diff --git a/01-layout/03-grid-css/01-rows-columns/README.md b/01-layout/03-grid-css/01-rows-columns/README.md
@@ -0,0 +1,17 @@
+# Rows Columns
+
+Partiendo del ejemplo anterior vamos a configurarlo.
+
+```diff
+.grid-container {
+  display: grid;
++ grid-template-columns: 100px 100px 300px;
++ grid-template-rows: 100px 100px;
+}
+```
+
+explicar el repeat
+
+```css
+  grid-template-columns: repeat(3, 100px 50px);
+```