The story of today is a sad one😔. It is about the CSS grid.
Most developers do not want to waste their time reading CSS. They just have a look at basic CSS and jump straight on bootstrap🚀. So, they ignore the "CSS grid" because they have a container, row, and column in bootstrap. So, why bother about the grid
But.....
They suffer problems when advanced problems come. They do not know the basics of the grid and the row and column classes have this grid property only which they do not know. So, they waste a lot of time doing trial and error.
That's why learning the basics of grids are important.
Don't worry, this will be a short and interesting one.
Introduction to the Grid:
Have you seen the excel sheet? or a school routine, or a dairy milk chocolate bar🍫. Those things are grids. The grid has rows and columns. In a CSS flex, it has either a row or a column. But a grid can have rows and columns both. Flex is 1D and the grid is 2D(I do not know what 3d is then😂.. bad joke). In case, you are wondering what flex is, you can check out my previous blog about flexbox😇.
There are some terminologies to know before starting the grid.
For a demo, Pick up a timetable. You can find rows and columns inside it. To draw a timetable, you need paper. That means the paper contains the timetable. So, the timetable is a metaphor for the grid and the paper is for the "Grid container".
Grid-item:
The timetable has its contents. It has different periods. Each period is an individual Grid item. Not that hard, is it?
Grid-line:
They are the vertical and horizontal lines that create the table. Each line is known as a grid line.
Grid-cell:
They are the cells of that table which has a particular row and column irrespective of its content.
Grid-area:
Take any vertical two lines.
Draw a line over them with a red pen(or any color other than black)
Now, take any two horizontal two lines.
follow step 2 once again.
See the space within red borders, it is your grid area.
Grid Container properties:
Display:
The display property is used to demonstrate whether the grid would be displayed as a block or inline.
display: grid | inline-grid;
Grid Template:
This is used to define columns or rows within a space-separated value.
grid-template-columns: 1fr 1fr;
The previous lines of code mean that there are two columns that have 1 unit of space for each of them. The same goes for the rows.
Other styles are:
grid-template areas which enclose areas within a particular row and column numbers.
grid-template is shorthand for previous styles.
Gap:
Gap is used for spacing between rows, and columns.
Row-gap is used to specify the gap between two rows.
Column-gap is used to specify the gap between two columns.
Gap is used as a shorthand to use row-gap and column-gap together.
row-gap: 100px;
column-gap: 50px;
gap: 100px 50px;
Justify items:
It is used to align items along the inline axis i.e. the row axis.
Align items:
It is used to align items along the block axis.
Place items:
It is used for using align-items and justify-items together.
Justify content and align content:
Justify content is used for alignment of the grid along the row axis and align content is used for alignment along the column axis.
Grid:
This is used as a shorthand to use all of the properties in one line.
Grid item properties:
These are the properties for the grid items.
Grid row(column) start(end):
It specifies a location of an item if it is at the start/end along the row/column.
Grid area:
It specifies the area of an item that has its row and column end is specified. It is a shorthand for the previous property.
Justify self & align self:
Justify self aligns the grid item inside a cell along the row axis and align self does the same along the column axis.
This almost wraps up the basics of the grid. If you wish to know more,
Go to this link.
For good and fun practice, play this Grid garden game.
Link to my GitHub: Barun10
So, stay tuned for upcoming content.
