Lemoncode
diff --git a/‎01-layout/03-grid-css/00-hello-css-grid/README.md
+41 b/‎01-layout/03-grid-css/00-hello-css-grid/README.md
+41
diff --git a/‎01-layout/03-grid-css/00-hello-css-grid/content/devtoolshello.png
52.8 KB b/‎01-layout/03-grid-css/00-hello-css-grid/content/devtoolshello.png
52.8 KB
diff --git a/‎01-layout/03-grid-css/01-grid-css-fundamentals/README.md
-181 b/‎01-layout/03-grid-css/01-grid-css-fundamentals/README.md
-181
diff --git a/‎01-layout/03-grid-css/01-grid-css-fundamentals/index.html
-17 b/‎01-layout/03-grid-css/01-grid-css-fundamentals/index.html
-17
diff --git a/‎01-layout/03-grid-css/01-grid-css-fundamentals/style.css
-32 b/‎01-layout/03-grid-css/01-grid-css-fundamentals/style.css
-32
diff --git a/‎01-layout/03-grid-css/01-rows-columns/README.md
+17 b/‎01-layout/03-grid-css/01-rows-columns/README.md
+17
@@ -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 :)
@@ -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);
+```