A Inexperienced persons Information to CSS Grid




CSS positioning has been the beast that many developers appear reluctant to overcome. It may be finnicky, specific, and irritating to say the least. When do I take advantage of place: absolute or place: relative? Why are my components not stacking on high of one another?

It is essential that front-end developers know the makes use of of all of those totally different properties, and the best way to use them. Nevertheless, there’s one other option to place your components precisely the way you need them:



CSS GRID

CSS grid got here out in April of 2007, and helped deal with the struggles of positioning that got here with Flexbox on the time. The place Flexbox handles one dimension (rows OR columns) very well, grid is usually higher for working with two dimensions. Here is a bit data graphic that can assist you out:

That is to point out you the principle axis in your web page. With a flexbox design, you’ll want to know which axis your ingredient can be going earlier than you begin, as it could solely work on one dimension

So let’s get into some precise CSS Grid.

Right here is the bottom code I am utilizing for the instance, in case you need to check issues out for your self:

/* CSS */

.base-box {
  font-size: 1.5rem;
  width: auto;
  top: 125px;
  margin: 1em;
  show: flex;
  align-items: middle;
  justify-content: middle;
}

#container {
  background-color: rgb(241, 194, 194);
}
#box-1 {
  background-color: rgb(75, 79, 105);
}

#box-2 {
  background-color: rgb(197, 40, 119);
}

#box-3 {
  background-color: rgb(54, 202, 228);
}

#box-4 {
  background-color: rgb(36, 233, 52);
}

#box-5 {
  background-color: rgb(238, 179, 90);
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Suitable" content material="IE=edge">
  <meta identify="viewport" content material="width=device-width, initial-scale=1.0">
  <title>Doc</title>
  <hyperlink rel="stylesheet" href="https://dev.to/aidanmargo/fashion.css">
</head>
<physique>
    <div id='container'>
      <div id='box-1' class="base-box">Div 1</div>
      <div id='box-2' class="base-box">Div 2</div>
      <div id='box-3' class="base-box">Div 3</div>
      <div id='box-4' class="base-box">Div 4</div>
      <div id='box-5' class="base-box">Div 5</div>
    </div>
</physique>
</html>
Enter fullscreen mode

Exit fullscreen mode

After opening index.html in your browser, it is best to see the web page like this: Starting div Layout

Now lets change the show of our container ingredient to be show: grid;. At first, you should not see a lot change moreover a bit bit of additional spacing. The place the actual magic is available in is while you create your template. Strive placing this code into the container ingredient, after which open your browser dev-tools to test it out:

grid-template-columns: repeat(5, 250px);
grid-template-rows: 150px;
Enter fullscreen mode

Exit fullscreen mode

word: repeat() permits for us to create a number of copies of the identical grid cell at a time.

In case you hover over the container ingredient utilizing your browser dev-tools, it is best to see what some dotted strains between every of our bins. These are the grid strains. These are what have been created with our grid-template-columns code above, and now every of our bins has it is personal column.



Fractional Items

We will enhance upon this, although. As this stands now, there’s a bit bit of additional house on the tip, and it isn’t very aware of totally different display sizes. However we are able to maintain that! Grid has a particular unit of measurement known as the fr. This stands for “fractional unit,” and is a tremendous option to allocate house to our little one components whereas additionally taking display dimension and display breakpoints under consideration.

Let’s change our column width of 250px to

grid-template-columns: repeat(5, 1fr)
Enter fullscreen mode

Exit fullscreen mode

Right here, we see that each one of grid containers take up an equal fraction of the container. We will combine and match these sizes to get no matter type of format we would like. Strive:

/* grid-template-columns: repeat(5, 1fr) */
grid-template-columns: 2fr 1fr 3fr;
grid-template-rows: 1fr 1fr;
Enter fullscreen mode

Exit fullscreen mode



Grid Shorthand

Alright, so there’s yet one more factor to notice, and that’s the grid shorthand. This lets us resolve the house our youngsters ingredient takes up on the grid based mostly on a begin level/finish level syntax.

We bear in mind from earlier that our grid has grid-lines that break up our columns and rows. Starting from the very begin of our container, the strains are numbered from left to proper for columns ranging from the #1, and from high to backside for rows. In grid shorthand, we use these line numbers as a option to dictate after we begin and cease our container on the grid.

Grid template line example
Image Source

Our orange field appears to have a whole lot of leftover house on the finish of the container. Let’s repair that with grid-shorthand. We would like this field to begin on the *second grid-line, and take up the remainder of the remaining house.

#box-5 {
  background-color: rgb(238, 179, 90);
  grid-column: 2/4;
}
Enter fullscreen mode

Exit fullscreen mode

Finished

CSS grid is a unbelievable option to make the most of the house of your web page in a responsive, inventive, and easy manner. Under are some sources to take a deeper dive into CSS grid.



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Inexperienced persons #Information #CSS #Grid