Blogs of Dwaipayan

CSS: Advanced Grid. 🍫

CSS: Advanced Grid. 🍫

Grid Operations on Child elements.

Dwaipayan Chakroborty's photo
Dwaipayan Chakroborty
·

4 min read

Css design layouts, like the Box model, flexbox, Grid has numerous properties. Remembering every one of them is pretty unlikely. Moreover, You will not be using most of them, most of the time(presumption, of course. You can choose to differ 💕)

But still, on the contrary - knowing has no downsides, at all, literally.

My last blog was more about the Essentials of the grid and the operations that can be done on the parent container.

If that Sounds alien? 😰 Well, you can get familiar with a few google searches or by going here. I would recommend the latter option, as it has links to great resources too. 🤗

Scope of this blog?

  • Just learning the different grid-related operations that can be done on grid elements.
  • Links to great resources.
  • Practise by playing, on a web IDE.

Grid Elements? Duh! What do you mean?

IMG_20210704_172910.jpg

Do you see all those small blocks named 1-8?

Yes. Those little ones. They are referred to as grid elements or grid children. Why? Because they are contained inside of the big parent container.

Did the term make sense, now? 🤔

Today's short blog will be about the things we can do to style the grid elements inside the container.

Let us get to it. I will keep it really really short.

Styling Grid Elements.

You can do a lot to style individual grid elements. Combines with other css properties, you unlock a whole different superpower.

But, using grid properties to style grid elements enables you to specify the position of an element in the grid row or column. That means you have complete control over the view and feel.

1. Span your grid item.

With grid, you can define and specify the position of a grid element. That is you can specify how many columns or rows will it take as per the required design. Isn't it great! 😍

IMG_20210718_110057.jpg

  • grid-column-start | grid-column-end: This property specifies the start position and end position of an element inside a grid, spanning across the column.

  • grid-row-start | grid-row-end : yes, you guessed it perfectly fine. These properties positions element inside a grid container, spanning across the rows. By specifying the start row line and end row line. 

Syntax:

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: span 2;
}

Have trouble wrapping it around? refer to the above picture. I will also link resources here. You can check them out too.

  • grid-column : This is the short hand property of grid-column-start & grid-column-end.

  • grid-row : this is the shorthand peorperty of grid-row-start & grid-row-end.

Syntax :

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1 / 2;
}
  • grid-area: This is the shorthand property of grid-row-start , grid-column-start , grid-row-end , grid-column-end.
Syntax:

grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end;

grid-area : 1 / 1 / 2 / 3;

2. justify-Self

This property helps in aligning a grid item inside a cell along the row axis(i.e, X-axis)

It takes four possible values :

  • start : Aligns the grid element at the start of the row axis.
  • end : Aligns the grid element at the end of the row axis.
  • center : Aligns the grid element at the center of the row axis.
  • stretch : Stretched the grid element across the row axis, to take up the maximum possible space.

3. align-self

As opposed to justify-self, This property helps in aligning a grid item inside a cell along the column axis(i.e, Y-axis)

  • start : Aligns the grid element at the start of the column axis.
  • end : Aligns the grid element at the end of the column axis.
  • center : Aligns the grid element at the center of the column axis.
  • stretch : Stretched the grid element across the column axis, to take up the maximum possible space.

4. place-self

This property is shorthand for align-self / justify-self. That means, by using this property you can specify both the directions while sizing an item inside a grid cell.

.item1 {
place-self : start  center ;
}

/*
can you guess how will it be aligned?
The above code essentially means ,
align-self : start;
justify-self : center;

easy? 
*/

That is it pretty much it for today's blog. I tried to keep it as short as possible with some of my hand notes for better comprehension.

  • css-tricks is one of the best platforms to learn more about css grids and css together! 💕 Read on css-tricks
  • w3schools is another great resource to learn from. What's best, is they also provide their own web IDE for you to play and have fun while learning. 😍 w3schools

We have covered the basics of the Web, so far. If you missed any in the series, feel free to check out : [My Blog Series : to master Web Dev](dwaipayan.hashnode.dev/series/master-web-de..)

Keep building. Keep learning. Have a wonderful weekend ahead. 🎅

CSSCSS3General ProgrammingBeginner DevelopersTutorial