From 357ccfc984dc81d7e86e45af8a5351b425d14d80 Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Tue, 2 Mar 2021 10:33:38 -0500 Subject: [PATCH 1/8] Fixed cssxref errors in learn/css/css_layout/grids to prevent double-double parentheses from appearing --- files/en-us/learn/css/css_layout/grids/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn/css/css_layout/grids/index.html b/files/en-us/learn/css/css_layout/grids/index.html index 089fe52eaedd830..33597edd18e9e66 100644 --- a/files/en-us/learn/css/css_layout/grids/index.html +++ b/files/en-us/learn/css/css_layout/grids/index.html @@ -296,7 +296,7 @@

The minmax() function

Our 100-pixel tall tracks won’t be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. It might be better to have tracks that are at least 100 pixels tall and can still expand if more content gets into them. A fairly basic fact about the web is that you never really know how tall something is going to be; additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension.

-

The {{cssxref("minmax()")}} function lets us set a minimum and maximum size for a track, for example minmax(100px, auto). The minimum size is 100 pixels, but the maximum is auto, which will expand to fit the content. Try changing grid-auto-rows to use a minmax value:

+

The {{cssxref("minmax")}} function lets us set a minimum and maximum size for a track, for example minmax(100px, auto). The minimum size is 100 pixels, but the maximum is auto, which will expand to fit the content. Try changing grid-auto-rows to use a minmax value:

.container {
     display: grid;
@@ -309,7 +309,7 @@ 
The minmax() function

 
 
As many columns as will fit

 
-
We can combine some of the things we have learned about track listing, repeat notation and {{cssxref("minmax()")}} to create a useful pattern. Sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. We do this by setting the value of grid-template-columns using {{cssxref("repeat()")}} notation, but instead of passing in a number, pass in the keyword auto-fill. For the second parameter of the function we use minmax(), with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr.

+
We can combine some of the things we have learned about track listing, repeat notation and {{cssxref("minmax")}} to create a useful pattern. Sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. We do this by setting the value of grid-template-columns using {{cssxref("repeat")}} notation, but instead of passing in a number, pass in the keyword auto-fill. For the second parameter of the function we use minmax(), with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr.

 
 
Try this in your file now, using the below CSS:

 

From b1583775ed47b33a099e3bdd2d8656eca42bcfd3 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 09:54:14 -0500
Subject: [PATCH 2/8] Upgraded LiveSample for margin-inline

---
 files/en-us/web/css/margin-inline/index.html | 32 ++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/files/en-us/web/css/margin-inline/index.html b/files/en-us/web/css/margin-inline/index.html
index 75812455e387dfc..9be8a0dee46d298 100644
--- a/files/en-us/web/css/margin-inline/index.html
+++ b/files/en-us/web/css/margin-inline/index.html
@@ -60,30 +60,38 @@ 
Examples

 
 
Setting inline start and end margins

 
-
HTML

-
-
<div>
-  <p class="exampleText">Example text</p>
-</div>
-

-
 
CSS

 
 
div {
   background-color: yellow;
   width: 120px;
-  height: 120px;
+  height: auto;
+  border: 1px solid green;
 }
 
-.exampleText {
-  writing-mode: vertical-rl;
+p {
+  margin: 0;
   margin-inline: 20px 40px;
-  background-color: #c8c800;
+  background-color: tan;
+}
+
+.verticalExample {
+  writing-mode: vertical-rl;
 }

 
+
HTML

+
+
<div>
+  <p>Example text</p>
+</div>
+<div>
+  <p class="verticalExample">Example text</p>
+</div>
+

+
 
Result

 
-
{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 140)}}

+
{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 230)}}

 
 
Specifications

 

From 8851be40107d18ba1442ad05ccbdc7c6c908119a Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 09:55:23 -0500
Subject: [PATCH 3/8] Upgraded LiveSample for margin-inline

---
 files/en-us/web/css/margin-inline/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/margin-inline/index.html b/files/en-us/web/css/margin-inline/index.html
index 9be8a0dee46d298..757cf6517e2d17b 100644
--- a/files/en-us/web/css/margin-inline/index.html
+++ b/files/en-us/web/css/margin-inline/index.html
@@ -91,7 +91,7 @@ 
HTML

 
 
Result

 
-
{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 230)}}

+
{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 240)}}

 
 
Specifications

 

From 0592e9763392692f1010b210b7699a7f927161c7 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 09:58:28 -0500
Subject: [PATCH 4/8] Upgraded LiveSample for margin-block

---
 files/en-us/web/css/margin-block/index.html | 32 +++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html
index 4e76630578160df..d2f3c06370a271c 100644
--- a/files/en-us/web/css/margin-block/index.html
+++ b/files/en-us/web/css/margin-block/index.html
@@ -58,30 +58,38 @@ 
Examples

 
 
Setting block start and end margins

 
-
HTML

-
-
<div>
-  <p class="exampleText">Example text</p>
-</div>
-

-
 
CSS

 
 
div {
   background-color: yellow;
   width: 120px;
-  height: 120px;
+  height: auto;
+  border: 1px solid green;
 }
 
-.exampleText {
-  writing-mode: vertical-rl;
+p {
+  margin: 0;
   margin-block: 20px 40px;
-  background-color: #c8c800;
+  background-color: tan;
+}
+
+.verticalExample {
+  writing-mode: vertical-rl;
 }

 
+
HTML

+
+
<div>
+  <p>Example text</p>
+</div>
+<div class="verticalExample">
+  <p>Example text</p>
+</div>
+

+
 
Result

 
-
{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 140)}}

+
{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 240)}}

 
 
Specifications

 

From c591fb52025956cb45f59b4b881dfc3e0e51c6db Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 09:58:56 -0500
Subject: [PATCH 5/8] Tweaked LiveSample for margin-inline

---
 files/en-us/web/css/margin-inline/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/css/margin-inline/index.html b/files/en-us/web/css/margin-inline/index.html
index 757cf6517e2d17b..825eb082dcfc12d 100644
--- a/files/en-us/web/css/margin-inline/index.html
+++ b/files/en-us/web/css/margin-inline/index.html
@@ -84,8 +84,8 @@ 
HTML

 
<div>
   <p>Example text</p>
 </div>
-<div>
-  <p class="verticalExample">Example text</p>
+<div class="verticalExample">
+  <p>Example text</p>
 </div>
 

 

From 76333411c5ab70e554e73f0cd866e7719e19c7e3 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 10:02:36 -0500
Subject: [PATCH 6/8] Tweaked LiveSample for margin-block

---
 files/en-us/web/css/margin-block/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html
index d2f3c06370a271c..61660f8397022a8 100644
--- a/files/en-us/web/css/margin-block/index.html
+++ b/files/en-us/web/css/margin-block/index.html
@@ -89,7 +89,7 @@ 
HTML

 
 
Result

 
-
{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 240)}}

+
{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 200)}}

 
 
Specifications

 

From e4096384f93a624e7a6dccb152f4ac8a24a70d3b Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" 
Date: Thu, 4 Mar 2021 10:05:26 -0500
Subject: [PATCH 7/8] Minor edit to  margin-block

---
 files/en-us/web/css/margin-block/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html
index 61660f8397022a8..fbbea8184440346 100644
--- a/files/en-us/web/css/margin-block/index.html
+++ b/files/en-us/web/css/margin-block/index.html
@@ -29,7 +29,7 @@
 margin-block: unset;
-

These values corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} property depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

+

This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} property depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

Constituent properties

From 655dfdeab214fd73f042ee8955209e7e617d613e Mon Sep 17 00:00:00 2001 From: "Eric A. Meyer" Date: Thu, 4 Mar 2021 10:06:19 -0500 Subject: [PATCH 8/8] Minor edits to margin-block and margin-inline --- files/en-us/web/css/margin-block/index.html | 2 +- files/en-us/web/css/margin-inline/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html index fbbea8184440346..288f6d1563358ed 100644 --- a/files/en-us/web/css/margin-block/index.html +++ b/files/en-us/web/css/margin-block/index.html @@ -29,7 +29,7 @@ margin-block: unset; -

This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} property depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

+

This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

Constituent properties

diff --git a/files/en-us/web/css/margin-inline/index.html b/files/en-us/web/css/margin-inline/index.html index 825eb082dcfc12d..0ae3a638f4ebbee 100644 --- a/files/en-us/web/css/margin-inline/index.html +++ b/files/en-us/web/css/margin-inline/index.html @@ -29,7 +29,7 @@ margin-inline: unset; -

This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

+

This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.

Constituent properties