From 78b582a330553707e947f1271e1068820de67563 Mon Sep 17 00:00:00 2001 From: osoda <18646766+osoda@users.noreply.github.com> Date: Fri, 20 Sep 2024 15:29:01 -0500 Subject: [PATCH 1/3] [es] Update example and subtitles in web/css/css_grid_layout/basic_concepts_of_grid_layout Fix some example and add subtitles level 3 at web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md --- .../basic_concepts_of_grid_layout/index.md | 119 +++++++++++++++++- 1 file changed, 114 insertions(+), 5 deletions(-) diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index c935c0e7392677..70db0cacaf046c 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/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,10 +177,22 @@ 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 +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + ```css .wrapper { display: grid; @@ -186,7 +200,41 @@ En el próximo ejemplo creamos una definición con una vía de `2fr` y luego dos } ``` -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 +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` ```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 +
+
0
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+ +``` + +```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")}}. From 304f7136bb9932982833c024150269ae1c7e320a Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 24 Sep 2024 10:29:57 -0600 Subject: [PATCH 2/3] Apply suggestions from linter review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../css/css_grid_layout/basic_concepts_of_grid_layout/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 70db0cacaf046c..732c40090025a4 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -309,7 +309,6 @@ La notación de repetición toma una lista de vías específicas, por lo tanto,
8
9
- ``` ```css live-sample___vias-repeat-intercaladas @@ -337,7 +336,6 @@ La notación de repetición toma una lista de vías específicas, por lo tanto, padding: 1px; color: #d9480f; } - ``` {{ EmbedLiveSample('vias-repeat-intercaladas', '220', '140') }} From 15200e3b866c32f016904d26b6cdd004677a32d4 Mon Sep 17 00:00:00 2001 From: osoda <18646766+osoda@users.noreply.github.com> Date: Wed, 25 Sep 2024 22:09:49 -0500 Subject: [PATCH 3/3] Update files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md Change the example to the original version (en-US) Co-authored-by: Alexander --- .../basic_concepts_of_grid_layout/index.md | 39 +------------------ 1 file changed, 1 insertion(+), 38 deletions(-) diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index 732c40090025a4..53aa7d02f04716 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -296,50 +296,13 @@ 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. -```html live-sample___vias-repeat-intercaladas -
-
0
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
-``` - -```css live-sample___vias-repeat-intercaladas +```css .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")}}.