[es] Update example and subtitles in web/css/css_grid_layout/basic_co…

…ncepts_of_grid_layout

Fix some example and add subtitles level 3 at web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md

files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md

@@ -91,6 +91,8 @@ Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref(
 
 ![](1_grid_track.png)
 
+### Ejemplo básico
+
 Puedo modificar nuestro ejemplo anterior al agregar la propiedad `grid-template-columns`, para así definir el tamaño (ancho) de las vías de cada columna.
 
 Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.
@@ -132,9 +134,9 @@ Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los
 }
 ```
 
-{{ EmbedLiveSample('grid_first', '610', '140') }}
+{{ EmbedLiveSample('Ejemplo_basico', '610', '140') }}
 
-### La Unidad fr
+### La unidad fr
 
 Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.
 
@@ -175,18 +177,64 @@ Las vías se pueden definir usando cualquier unidad de medida. Grid también int
 }
 ```
 
-{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}
+{{ EmbedLiveSample('La_unidad_fr', '220', '140') }}
+
+### Tamaño desigual
 
 En el próximo ejemplo creamos una definición con una vía de `2fr` y luego dos vías de `1fr`. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía y una parte a cada una de las dos vias restantes.
 
+```html
+<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+```
+
 ```css
 .wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
 }
 ```
 
-En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+```
+
+{{ EmbedLiveSample('Tamaño_desigual', '220', '140') }}
+
+### Mezclando tamanaños absolutos y flexibles
+
+En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible. El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.
+
+```html
+<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+```
 
 ```css
 .wrapper {
@@ -195,6 +243,28 @@ En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fr
 }
 ```
 
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+```
+
+{{ EmbedLiveSample('Mezclando_tamanaños_absolutos_y_flexibles', '220', '140') }}
+
 ### Listando vías con la notación `repeat()`
 
 Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación `repeat()` con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:
@@ -226,13 +296,52 @@ La notación de repetición se puede utilizar para una parte del listado de vía
 
 La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía `1fr` seguida por una vía `2fr`, repetida cinco veces.
 
-```css
+```html live-sample___vias-repeat-intercaladas
+<div class="wrapper">
+  <div>0</div>
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+</div>
+
+```
+
+```css live-sample___vias-repeat-intercaladas
 .wrapper {
   display: grid;
   grid-template-columns: repeat(5, 1fr 2fr);
 }
 ```
 
+```css hidden live-sample___vias-repeat-intercaladas
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper > div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1px;
+  color: #d9480f;
+}
+
+```
+
+{{ EmbedLiveSample('vias-repeat-intercaladas', '220', '140') }}
+
 ### La cuadrícula implícita y explícita
 
 Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.