chore(css): Move CSS examples - Feature queries, overflow, subgrid, masonry (mdn#36693)

* chore(css): Move CSS examples - Using feature queries

* chore(css): Move CSS examples - Flow layout and overflow

* chore(css): Move CSS examples - Flow layout and overflow

* chore(css): Move CSS examples - In flow and out of flow

* chore(css): Move CSS examples - Masonry layout

* chore(css): Move CSS examples - Subgrid

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

* chore(css): Move CSS examples - Changes following reviewer feedback

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>

Author: bsmth

files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md

@@ -40,7 +40,31 @@ For example, we can apply a set of styles or import an entire stylesheet if the
 
 As another example, if you want to check if a browser supports the `row-gap` property you would write the following feature query. It doesn't matter which value you use in a lot of cases: if all you want is to check that the browser supports this property, then any valid value will do.
 
-{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}
+```html live-sample___simple
+<div class="box">
+  If your browser supports the row-gap property, the border will be dashed and
+  text will be red.
+</div>
+```
+
+```css live-sample___simple
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.box {
+  border: 4px solid blue;
+  color: blue;
+  padding: 1em;
+}
+@supports (row-gap: 10px) {
+  .box {
+    border: 4px dashed darkgreen;
+    color: red;
+  }
+}
+```
+
+{{EmbedLiveSample("simple")}}
 
 The value part of the property-value pair matters more if you are testing for new values of a particular property. All browsers support `color: red`: this dates back to CSS1. However, there are often additional values added to properties in CSS, like [relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors), which may not be supported. Feature queries enable testing property and value pairs, meaning we can detect support for values.
 
@@ -71,7 +95,31 @@ In addition to asking the browser if it supports a feature, you can test for the
 
 The CSS inside the following example feature query will run if the browser does not support `row-gap`.
 
-{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}
+```html live-sample___not
+<div class="box">
+  If your browser does not support row-gap, the content will be darkgreen with a
+  dashed border.
+</div>
+```
+
+```css live-sample___not
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.box {
+  border: 4px solid blue;
+  color: blue;
+  padding: 1em;
+}
+@supports not (row-gap: 10px) {
+  .box {
+    border: 4px dashed darkgreen;
+    color: darkgreen;
+  }
+}
+```
+
+{{EmbedLiveSample("not")}}
 
 ## Testing for more than one feature
 
@@ -86,7 +134,32 @@ You may need to test support for more than one property in your feature query. T
 
 For example, if the CSS you want to run requires that the browser supports CSS Shapes and CSS grid, you could create a rule that tests browser support for both of these features. The following rule will only return true if `shape-outside: circle()` and `display: grid` are both supported by the browser.
 
-{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}
+```html live-sample___and
+<div class="box">
+  If your browser supports <code>display: grid</code> and
+  <code>shape-outside: circle()</code>, the content will be darkgreen with a
+  dashed border.
+</div>
+```
+
+```css live-sample___and
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.box {
+  border: 4px solid blue;
+  color: blue;
+  padding: 1em;
+}
+@supports (display: grid) and (shape-outside: circle()) {
+  .box {
+    border: 4px dashed darkgreen;
+    color: darkgreen;
+  }
+}
+```
+
+{{EmbedLiveSample("and")}}
 
 ## Testing for at least one of multiple features
 
@@ -101,7 +174,30 @@ You can also use `or` to apply CSS only if one or more declarations are supporte
 
 This can be particularly useful if a feature is vendor prefixed, as you can test for the standard property plus any vendor prefixes.
 
-{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}
+```html live-sample___or
+<div class="box">
+  The text and border will be green if your browser supports font smoothing.
+</div>
+```
+
+```css live-sample___or
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+.box {
+  border: 4px solid blue;
+  color: blue;
+  padding: 1em;
+}
+@supports (font-smooth: always) or (-webkit-font-smoothing: antialiased) {
+  .box {
+    border: 4px dashed darkgreen;
+    color: darkgreen;
+  }
+}
+```
+
+{{EmbedLiveSample("or")}}
 
 ## Additional feature query options
 
@@ -133,6 +229,12 @@ In this example, we check if the browser supports the `AccentColor` {{cssxref("s
 #### CSS
 
 ```css
+body {
+  font: 1.2em / 1.5 sans-serif;
+}
+p {
+  padding: 1em;
+}
 @supports (color: AccentColor) {
   p {
     color: green;
@@ -149,9 +251,9 @@ In this example, we check if the browser supports the `AccentColor` {{cssxref("s
 }
 ```
 
-#### Results
+#### Result
 
-{{EmbedLiveSample("Browser support test", "600", "50")}}
+{{EmbedLiveSample("Browser support test")}}
 
 ## Limitations of feature queries