chore(css): Move CSS examples - layout cookbooks

files/en-us/web/css/layout_cookbook/breadcrumb_navigation/index.md

@@ -16,7 +16,40 @@ Display the hierarchy of the site by displaying inline links, with a separator b
 
 ## Recipe
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}
+```html live-sample___breadcrumb-example
+<nav aria-label="Breadcrumb" class="breadcrumb">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Category</a></li>
+    <li><a href="#">Sub Category</a></li>
+    <li><a href="#">Type</a></li>
+    <li><span aria-current="page">Product</span></li>
+  </ul>
+</nav>
+```
+
+```css live-sample___breadcrumb-example
+.breadcrumb {
+  padding: 0 0.5rem;
+  font-size: 1.5rem;
+}
+
+.breadcrumb ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumb li:not(:last-child)::after {
+  display: inline-block;
+  margin: 0 0.25rem;
+  content: "→";
+}
+```
+
+{{EmbedLiveSample("breadcrumb-example", "", "100px")}}
 
 > [!CALLOUT]
 >

files/en-us/web/css/layout_cookbook/card/index.md

@@ -20,7 +20,117 @@ The cards in the group should line up in two dimensions — both vertically and
 
 ## Recipe
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}
+```html live-sample___card-example
+<div class="cards">
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        The idea of reaching the North Pole by means of balloons appears to have
+        been entertained many years ago.
+      </p>
+    </div>
+  </article>
+
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>Short content.</p>
+    </div>
+    <footer>I have a footer!</footer>
+  </article>
+
+  <article class="card">
+    <header>
+      <h2>A longer heading in this card</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        In a curious work, published in Paris in 1863 by Delaville Dedreux,
+        there is a suggestion for reaching the North Pole by an aerostat.
+      </p>
+    </div>
+    <footer>I have a footer!</footer>
+  </article>
+  <article class="card">
+    <header>
+      <h2>A short heading</h2>
+    </header>
+
+    <img
+      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg"
+      alt="Hot air balloons" />
+    <div class="content">
+      <p>
+        The idea of reaching the North Pole by means of balloons appears to have
+        been entertained many years ago.
+      </p>
+    </div>
+  </article>
+</div>
+```
+
+```css live-sample___card-example
+img {
+  max-width: 100%;
+}
+
+.cards {
+  max-width: 800px;
+  margin: 1em auto;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  grid-gap: 20px;
+}
+
+.card {
+  border: 1px solid #999;
+  border-radius: 3px;
+
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+
+.card img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.card h2 {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.card .content {
+  padding: 0.5rem;
+}
+
+.card footer {
+  background-color: #333;
+  color: #fff;
+  padding: 0.5rem;
+}
+```
+
+{{EmbedLiveSample("card-example", "", "900px")}}
 
 > [!CALLOUT]
 >

files/en-us/web/css/layout_cookbook/center_an_element/index.md

@@ -16,7 +16,33 @@ To place an item into the center of another box horizontally and vertically.
 
 ## Recipe
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
+```html live-sample___center-example
+<div class="container">
+  <div class="item">I am centered!</div>
+</div>
+```
+
+```css live-sample___center-example
+.container {
+  border: 2px solid rgb(75 70 74);
+  border-radius: 0.5em;
+
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item {
+  border: 2px solid rgb(95 97 110);
+  border-radius: 0.5em;
+  padding: 20px;
+
+  width: 10em;
+}
+```
+
+{{EmbedLiveSample("center-example", "", "250px")}}
 
 > [!CALLOUT]
 >

files/en-us/web/css/layout_cookbook/column_layouts/index.md

@@ -28,7 +28,38 @@ If you create columns using multi-column layout your text will remain as a conti
 
 You can control the gaps between columns with the {{cssxref("column-gap")}} or {{cssxref("gap")}} properties, and add a rule between columns using {{cssxref("column-rule")}}.
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}
+```html live-sample___multi-column-layout-example
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+  </p>
+</div>
+```
+
+```css live-sample___multi-column-layout-example
+.container {
+  border: 2px solid rgb(75 70 74);
+  border-radius: 0.5em;
+  padding: 20px;
+  font-size: 1.2rem;
+
+  column-width: 10em;
+  column-rule: 1px solid rgb(75 70 74);
+}
+```
+
+{{EmbedLiveSample("multi-column-layout-example", "", "300px")}}
 
 In this example, we used the {{cssxref("column-width")}} property to set a minimum width that the columns need to be before the browser adds an additional column. The {{cssxref("columns")}} shorthand property can be used to set the `column-width` and {{cssxref("column-count")}} properties, either of which can define the maximum number of columns allowed.
 
@@ -48,15 +79,100 @@ Flexbox can be used to break content into columns by setting {{cssxref("display"
 
 Margins or the `gap` property can be used to create gaps between items, but there is currently no CSS property that adds rules between flex items.
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}
+```html live-sample___columns-flexbox-example
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+    carrot soko.
+  </p>
+</div>
+```
+
+```css live-sample___columns-flexbox-example
+.container {
+  border: 2px solid rgb(75 70 74);
+  border-radius: 0.5em;
+  padding: 20px 10px;
+  font-size: 1.2rem;
+
+  display: flex;
+}
+
+.container > * {
+  padding: 10px;
+  border: 2px solid rgb(95 97 110);
+  border-radius: 0.5em;
+
+  margin: 0 10px;
+  flex: 1;
+}
+```
+
+{{EmbedLiveSample("columns-flexbox-example", "", "350px")}}
 
 > [!CALLOUT]
 >
 > [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/columns-flexbox--download.html)
 
 To create a layout with flex items that wrap onto new rows, set the {{cssxref("flex-wrap")}} property on the container to `wrap`. Note that each flex line distributes space for that line only. Items in one line will not necessarily line up with items on other lines, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}
+```html live-sample___columns-flexbox-wrapping-example
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+    Dandelion cucumber earthnut pea peanut soko zucchini.
+  </p>
+
+  <p>
+    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
+    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
+    purslane kale. Celery potato scallion desert raisin horseradish spinach
+    carrot soko.
+  </p>
+</div>
+```
+
+```css live-sample___columns-flexbox-wrapping-example
+.container {
+  border: 2px solid rgb(75 70 74);
+  border-radius: 0.5em;
+  padding: 20px 10px;
+  width: 500px;
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.container > * {
+  padding: 10px;
+  border: 2px solid rgb(95 97 110);
+  border-radius: 0.5em;
+
+  margin: 0 10px;
+  flex: 1 1 200px;
+}
+```
+
+{{EmbedLiveSample("columns-flexbox-wrapping-example", "", "350px")}}
 
 > [!CALLOUT]
 >
@@ -72,7 +188,48 @@ Use flexbox:
 
 If you want a two-dimensional grid where items line up in rows _and_ columns, then you should choose CSS grid layout. Similar to how flexbox works on the direct children of the flex container, grid layout works on the direct children of the grid container. Just set {{cssxref("display", "display: grid;")}} on the container. Properties set on this container — like {{cssxref("grid-template-columns")}} and {{cssxref("grid-template-rows")}} — define how the items are distributed along rows and columns.
 
-{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}
+```html live-sample___grid-layout-example
+<div class="container">
+  <p>
+    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
+    daikon amaranth tatsoi.
+  </p>
+
+  <p>
+    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+    tatsoi pea sprouts fava bean collard greens.
+  </p>
+
+  <p>
+    Nori grape silver beet broccoli kombu beet greens fava bean potato quandong
+    celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens
+    parsnip. .
+  </p>
+</div>
+```
+
+```css live-sample___grid-layout-example
+.container {
+  border: 2px solid rgb(75 70 74);
+  border-radius: 0.5em;
+  padding: 20px;
+  width: 500px;
+  font-size: 1.2rem;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}
+
+.container > * {
+  padding: 10px;
+  border: 2px solid rgb(95 97 110);
+  border-radius: 0.5em;
+  margin: 0;
+}
+```
+
+{{EmbedLiveSample("grid-layout-example", "", "400px")}}
 
 > [!CALLOUT]
 >