CSS GRIDS…
CSS grid layouts are also known as ‘grid’ or ‘css grids’ is a 2 dimensional grid based layout system that compared to any web layout system of the past completely changes the way we design user interfaces. Flexbox is also a very good layout tool but it’s one dimensional flow has different use cases and they actually work together very well.
let us understand the terminology which is very important.
GRID CONTAINER
The element on which display:grid is applied. It’s the parent of all the grid items. In this container is the container.
<div class="container">
<div class='Item no1"></div>
<div class='Item no2"></div>
<div class='Item no3"></div>
<div class='Item no4"></div>
</div>GRID LINE
The dividing line that makes up the structure of the grid. They can be either horizontal or vertical.
GRID TRACK
The space between two adjacent grid lines.
GRID AREA
The total space is surrounded by 4 grid lines.
CSS GRID PROPERTIES
Properties for the parent (Container)
display: Defines the element as a grid container and establishes a new grid formatting context for the contents.
value:- grid — generates a block-level grid.
value- “Inline-grid” generates an inline-level grid.
.container{
display:grid/inline-grid;
}
GRID TEMPLATE COLUMNS AND GRID TEMPLATE ROW
Defines the column and rows in the grid with a space-separated list of values.
Values- <track size > can be length a percentage or a fraction of the free space in the grid using fr unit.
<line name> an arbitrary name of your choosing.
.container{
grid-template-columns: 1fr 1fr;
minimax:(10px 1fr) 3fr;
repeat:(5 1fr);
50px auto 100px 1fr;
} The fr unit allows us to set the size of the track as a fraction of the free space of the grid container for example this will set each item to one-third the width of the grid container.
.container{
grid-template-column: 1fr 1fr 1fr;
}GRID TEMPLATE AREAS
Defines a grid template by referencing the names of the grid areas which are specified with the grid area properties. A period signifies an empty cell. The syntax itself provides a visualization of the structure of the grid.
Values
<grid area names>-The name of the grid area is specified with the grid area.
. a period signifies an empty grid cell.
none- no grid areas are classified.
.container{
grid-template-area: <"grid-area-name>|.|none|
}
For example
.item-a{grid area:header;}
.item-b{grid area:main;}
.item-c{grid area:sidebar;}
.item-d{grid area:footer;}
.container{
display:grid;
grid-template-column:50px 50px 50px 50px;
grid-template-row:auto;
}GRID TEMPLATE
Shorthand for setting grid template rows and column and grid template areas in a single declaration.
VALUES- none; sets all three properties to their initial values. <grid-template-rows> <grid-template-columns> sets grid template rows and columns to the specific values respectively and sets the grid template areas to none.
.container{
grid template: none|<grid-template-rows>|<grid-template-columns>;|JUSTIFY-ITEMS
Align grid items along the inline(row) axis. This value applies to all grid items inside the container.
VALUES
start- aligns items with the start of the cell.
end-aligns items with the end of the cell.
center- aligns items to the center of the cell.
stretch- sets the whole width of the cell (default)
.coantainer{
justify-items: start|end|center|stretch;
}ALIGN ITEMS
Align grid items along the column axis.
stretch- fills the whole height of the cell.
start- align items to the start edge of the cell.
end-aligns items to the end edge of the cell.
center — aligns items to the center of their cell.
baseline- aligns items along text baseline.
PLACE ITEMS
Places both the justify items and align-items properties in a single declaration.
JUSTIFY CONTENT
Sometimes the total size of the grid can be less than the size of the container. This would happen when all of the grid items are sized with flexible units like px. In this, we can set the alignment of the grid within the container. This property aligns the grid along the inline (row) axis.
Start: aligns the grid to the start edge of the container.
End: aligns the grid to the end edge of the grid container.
Center: Align the items to the center of the container.
Stretch: resizes the grid items to allow the grid to fill the full width of the grid container
Space around: places an even amount of space between each grid item with half-sized spaces on the far end.
Space between: places an even amount of space between each grid item with no spaces at the far end.
Get Biswas chhetri’s stories in your inbox
Join Medium for free to get updates from this writer.
Space evenly: places an even amount of space between each grid items including far edges.
.container{
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; |
}ALIGN CONTENT
This property aligns the content along the block axis.
Start- Align the items to the start edge of the grid container.
End- aligns the items to the end edge of the container.
Center- align the grid in the center of the grid container.
Stretch- resizes the grid items to allow the grid to fill the full height of the grid container.
Space-around- places an even amount of space between each item with half-sized spaces on the far end.
space between- places an extra amount of space between each item with no space at the far end.
Space evenly- places an even amount of space even at the far ends.
GRID AUTO COLUMNS AND GRID AUTO ROWS
Specifies the size of any auto-generated grid tracks (implicit grid tracks) Implicit grid tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid.
values
<track size> can be the length, the fraction of the free space,
.container{
grid-template-column: 60px 60px;
grid-template-row: 90px 90px;
}But now imagine we can use a grid column and grid row to position our grid items like this.
.item a {
grid-column: 1/2
grid-row:2/3
}
.item b {
grid-column:5/6;
grid-row:2/3
}The result will be something like this:-
We told item b to start on column 5 and end on column 6 because we referred to lines that do not exist implicit tracks with a width of zero were created to fill in the gaps. We use grid auto columns and rows to specify the width of these implicit tracks.
.container{
grid-auto-column: 60px;
}
GRID AUTO FLOW
If you have grid items that you don’t explicitly place on a grid the auto-placement algorithm places the items automatically. This property controls how the auto-placement algorithms work.
rows: tells the auto-placement algorithm to fill in each row in turn adding new rows as necessary.
column: tells the auto-placement algorithm to fill in each column.
dense: tells the auto-placement algorithm to attempt to fill in the hole earlier in the grid if the smaller items come up later.
.container{
grid-auto-flow: row; column; dense; row-dense; column-dense;
}Float, display: inline-block, display: table-cell, verticle align and column properties have no effect on grid lines.
Grid-column-Start, Grid-column-end, Grid-Row-start, Grid Row End.
This determines the grid item’s location within the grid by referring to specific grid lines. Grid col start/Grid Row start is the line where the items begin and grid column end and grid row end is the line where the item ends.
Values
<line> can be a number to refer to a numbered grid or a name to refer to a named grid line.
Span <number> the item will span across until it hits the next line with the provided name.
Auto: this indicates auto placement automatic span or a default span of one.
/* This is the example */
.item a {
grid-column-start:2;
grid-col-end:five;
grid-row-start: row 1-start;
grid-row-end:3;
}
.item b{
grid-col-start:1;
grid-col-end: span col 4 start;
grid-row-start: 2;
grid-row-end: span 2;
}
GRID COL | GRID ROW
Short-hand for grid col start + grid col end and grid-row-start + grid row-end respectively.
.item{
grid-column: <start line>|<end-line>|<start line>|<span value>;
}
/* same goes for grid row */GRID AREA
Gives an item a name so that it can be referred to by a template created with grid template areas property. This can be used as a shorthand for grid row start + grid col start + grid row end + grid col end.
values:- <name> a name of your choosing <row-start> <column-start> <row-end> <column-end> can be numbers or named lines.
EXAMPLE:
.item d {
grid-area: header;
}As the shorthand for grid row start + grid column start + grid row end+ grid column end :
.item d {
grid-area: 1 | col 4 start | last line | 6;
}JUSTIFY SELF
Aligns a grid item along the cell along the row axis. This value applies to the grid item inside a single cell.
value:-
start: Aligns the grid item to the start edge of the cell.
end: aligns the grid item to the end edge of the cell.
center: aligns the item to the center of the cell.
stretch: fills the whole width of the cell.
.item{
justify-self: start, end, center, stretch;
}ALIGN SELF
Aligns a grid item inside a cell along the column axis. This value applies to the content inside the single grid item.
start: aligns the grid item to be filled with the start edge of the cell.
end: aligns the grid item to be filled with the end edge of the cell.
center: aligns the grid item in the center of the cell.
stretch: fills the whole height of the cell.
PLACE SELF ( ALIGN SELF + JUSTIFY SELF)
Place self sets both the aligned self and justified self properties in a single declaration.
auto: the “default” alignment for the layout mode.
<align-self> <justify-self> — The first value sets align-self the second value sets justify self. If the second value is omitted the first value is assigned to both properties.
.item a {
place self: center;
}
.item b {
place self: center stretch;
}
