docs(blog): add grid post

documentation/blog/2024-07-17-css-grid.md

@@ -1,21 +1,17 @@
 ---
-title: 5 Best Free Platforms for Hosting Hobby Web Projects
-description: A list of the best free platforms for hosting hobby web projects. You can host your static websites, React apps, and more for free.
+title: How to Use Two Dimensional Layouts with CSS Grid?
+description: We'll explore how to create two dimensional layouts using CSS Grid.
 slug: css-grid
-authors: joseph_mawa
-tags: [comparison]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-23-top-hosting/social.png
+authors: abdullah_numan
+tags: [css]
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/social-2.png
 hide_table_of_contents: false
 ---
 
-# Two Dimensional Layouts with CSS Grid - A Useful Guide
+## Introduction
 
 This post provides an in-depth guide on creating two dimensional layouts using CSS Grid. We cover grid related concepts and properties in detail, and explore how to implement common webpage layouts using implicit tracks and explicit templates.
 
-<!--truncate-->
-
-## Introduction
-
 [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) is a two dimensional layout system that utilizes both columns and rows for placing HTML elements and setting their flow inside a container. Grid gives developers better control over layouts by helping in concretely deciding how grid elements should be placed and behave in both horizontal and vertical directions.
 
 The Grid Layout became part of the CSS specs in 2017 and has since been widely adopted by modern browsers. It is desgined to work alongside other CSS layout techniques, such as [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float)s and [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
@@ -26,11 +22,21 @@ We explore different ways of defining grid layouts, such as with implicit grid t
 
 We round off all the useful concepts by building some common layouts: a partially explicit layout for a list of post items, a 12 column grid with named lines, and a webpage layout with named areas placed with `grid-template-areas`. Finally, we demonstrate how to implement responsive webpage layouts with two break points for the grid area based grid and the 12 column grid.
 
+Steps we'll cover in this post include:
+
+- [Understanding CSS Grid](#what-is-css-grid)
+- [Essential Concepts of CSS Grid](#css-grid-essential-concepts)
+- [Working with Implicit Grid and Default Tracks](#css-grid-auto-layouts-working-with-the-implicit-grid-and-default-tracks)
+- [Creating Layouts with Column and Row Templates](#css-grid-layouts-with-column--row-templates)
+- [Building Responsive Webpage Layouts](#building-responsive-webpage-layouts)
+
 ## What is CSS Grid ?
 
 CSS Grid is a two dimensional layout system that allows developers to place and align HTML elements in both column and rows directions. It implements a Grid Formatting Context in which elements flow in **block** and **inline** axes at the same time:
 
-![css-grid-axes](./images/css-grid-axes.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-axes.png" alt="css grid" />
+</div>
 
 Grid is different from Flexbox in that it implements a flow in both directions, as opposed to Flexbox in which the document flows in one direction -- either column or row. As such, CSS Grid helps divide a webpage into well placed, rearrangeable regions such as a header, navigation areas, sidebars, advertising area, main content area and footers.
 
@@ -67,15 +73,19 @@ A CSS Grid is initialized inside a parent with its display set to `display: grid
 
 After initialization, CSS Grid creates an independent Grid Formatting Context inside the container. The GFC is scoped inside the parent and produces tracks that run in both directons. Tracks are made up of cells formed at intersections of a column and a row.
 
-![css-grid-ill](./images/css-grid-ill.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-ill.png" alt="css grid" />
+</div>
 
 #### CSS Grid: Default Tracks and The Auto Flow
 
 CSS Grid creates default tracks when a grid is initialized in a container.
 
 For example, the grid for the above `<div>` gives default tracks with one column spanning full width and arbitrary rows added automatically. Elements that are direct children of the parent occupy these track cells:
 
-![css-grid-default](./images/css-grid-default.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-default.png" alt="css grid" />
+</div>
 
 Notice, the default track is the same as the typical block layout that is implemented in the normal flow. It is effectively the grid version of the Block Formatting Context. This track follows the grid's default **auto flow** directed by the container's Grid Formatting Context to place items on the grid. It forms the backbone of the **implicit grid**.
 
@@ -336,7 +346,9 @@ main {
 
 The resulting layout has items wrapped into new rows. When the last row doesn't have enough items, they grow to take up all remaining space. This gives an inconsistent look due to disproportionate width on the last row compared to prior rows:
 
-![css-grid-1](./images/css-grid-1.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-1.png" alt="css grid" />
+</div>
 
 This happens because in Flexbox, space distribution of items takes place in new lines. And items are allocated their inline space afresh when a new row is occupied.
 
@@ -375,7 +387,9 @@ We can apply a grid container, with a column template that distributes the horiz
 
 The CSS Grid based styles above gives us a grid with items placed in seven equally wide column tracks. Item widths remain same when new rows fall short of items:
 
-![css-grid-2](./images/css-grid-2.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-2.png" alt="css grid" />
+</div>
 
 Here, we are using a column template with `grid-template-columns` that gives a grid with seven`1fr` columns in the block axis.
 
@@ -447,7 +461,9 @@ We can make the items behave more "flex-like" by `auto-fill`ing grid tracks. For
 
 In the above change, we are creating arbitrarily repeating column cells that have `200px` width and get filled up automatically according to their document order. Auto generation of track cells with `auto-fill` like this is magical. However, using `auto-fill` with fixed with comes with a downside -- because it leaves unused space at the end of the column as is:
 
-![css-grid-3](./images/css-grid-3.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-3.png" alt="css grid" />
+</div>
 
 We can overcome this drawback easily by Box alignment properties like `justify-content` and `justify-items`. However, CSS Grid offers more tools, such as the `auto-fit` property.
 
@@ -468,7 +484,9 @@ With `auto-fit` and with a combination of `minmax()`, we can create artbitrary n
 
 This is actually what we'd want starting from the Flexbox example. And on top of everything, CSS Grid now makes it permanently responsive. Thanks to CSS Grid, that's just with one line of CSS. And without using any media queries:
 
-![css-grid-5](./images/css-grid-5.gif)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-5-min.gif" alt="css grid" />
+</div>
 
 We can now place infinite number of rows into this grid. They'll occupy the entire row. And the number of columns will change according to the screen size.
 
@@ -482,7 +500,9 @@ In this example, we expand the earlier items grid in which we have an explicit c
 
 Basically this sub-layout:
 
-![css-grid-6](./images/css-grid-5.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-5.png" alt="css grid" />
+</div>
 
 First, let's adjust some markup with styled classes. Update the `<main>` section to this:
 
@@ -738,10 +758,12 @@ main {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   /* highlight-start */
-  grid-template-rows: [posts-start featured-heading-start] 100px [featured-heading-end] repeat(
+  grid-template-rows:
+    [posts-start featured-heading-start] 100px [featured-heading-end] repeat(
       2,
       300px
-    ) [other-posts-heading-start] 100px [other-posts-heading-end posts-end];
+    )
+    [other-posts-heading-start] 100px [other-posts-heading-end posts-end];
   /* highlight-end */
   grid-auto-rows: 300px;
   gap: 8px;
@@ -800,10 +822,12 @@ The syntax for setting grid line names on templates looks like this:
 Grid line naming lets us set easy-to-follow names that describe our design specs. In our example, we are adding line names to the rows template:
 
 ```css
-grid-template-rows: [posts-start featured-heading-start] 100px [featured-heading-end] repeat(
+grid-template-rows:
+  [posts-start featured-heading-start] 100px [featured-heading-end] repeat(
     2,
     300px
-  ) [other-posts-heading-start] 100px [other-posts-heading-end posts-end];
+  )
+  [other-posts-heading-start] 100px [other-posts-heading-end posts-end];
 ```
 
 Notice, we are adding descriptive names for our use case. Names can be added to the start and end of a track unit. And a line can have multiple names.
@@ -859,7 +883,9 @@ In this section, we employ line numbers and names in combination with `span`s to
 
 The layout we're aiming for looks like this:
 
-![css-grid-6](./images/css-grid-6.png)
+ <div className="centered-image">
+<img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-07-17-css-grid/css-grid-6.png" alt="css grid" />
+</div>
 
 The HTML we have for this is available here:
 
@@ -1507,5 +1533,3 @@ So, here is the list:
 - Use the `repeat()` syntax to compose repeating patterns of cells in track lists.
 - `fr`s, `px`els, `%`s and `span`s all have their appropriate use cases. Feel free to combine track units that best fit our use cases.
 - Conserve the document order by changing the visual order of grid items in ways that does not distort tab order. This is especially necessary for accessibility with screen readers.
-
-## Summary