Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
Use the `grid-template-columns` property to set up how many columns your grid will have and how wide each column should be. You can use pixel values (px) or percentages (%) to define these widths.
#grid-container {
display: grid;
width: 100px;
grid-template-columns: 20px 20% 60%;
}
The 'fr' unit helps divide space proportionally. If you use 'fr', each unit represents a fraction of the available space in the grid. When combined with fixed sizes, 'fr' units share the remaining space.
/*
In this example, the second column gets 60px, and the remaining 40px is split equally between the first and third columns (20px each).
*/
.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}
The `grid-gap` property controls the spacing between rows and columns in your grid. The first value is for row gaps and the second is for column gaps.
// Sets a 20px gap between rows and a 10px gap between columns
#grid-container {
display: grid;
grid-gap: 20px 10px;
}
To create a grid container, use `display: grid`. The items inside this container are called grid items. This sets up a two-dimensional layout system.
#grid-container {
display: grid;
}
The `grid-row` property allows you to specify where a grid item should start and end within the rows of the grid. You can use this to control how many rows an item spans.
/* Example: Starts on row 1 and spans 2 rows */
.item {
grid-row: 1 / span 2;
}
If you want to create a grid that behaves like an inline element (not taking up the full width), use `display: inline-grid`. This works similarly to `display: grid` but allows the grid to flow inline with other content.
#grid-container {
display: inline-grid;
}
The `minmax()` function lets you set a minimum and maximum size for a column. This helps the grid items adapt to different screen sizes.
/* The middle column will be between 100px and 500px wide, depending on screen size */
.grid {
display: grid;
grid-template-columns: 100px minmax(100px, 500px) 100px;
}
The `grid-row-start` and `grid-row-end` properties define where a grid item starts and ends in terms of rows. The `grid-row` property combines these two for convenience.
/* Example: Starts at row 2 and spans 2 rows */
grid-row-start: 2;
grid-row-end: span 2;
The `grid-row-gap` property sets the space between rows in the grid layout. You can specify the size in pixels, percentages, or other length units.
/* Sets the gap between rows to 20px */
grid-row-gap: 20px;
The `grid-area` property sets an item’s size and position in the grid. It’s a shorthand for setting `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end` all at once.
/* Example: Starts at row 2, column 1, spans 2 rows and 3 columns */
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
The `justify-items` property controls how items are aligned within their grid cells. Setting it to `center` will center the items horizontally within their cells.
#container {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
The `align-self` property lets you adjust the vertical alignment of a grid item within its cell. Use values like `start`, `center`, `end`, or `stretch`.
/* Example: Centers the item vertically within its cell */
.item {
align-self: center;
}
The `grid-template-areas` property lets you name and arrange different areas of your grid layout. It helps in visualizing the layout by assigning names to different sections.
/* Example: Defines areas for navigation and content */
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}
The `grid-auto-flow` property controls how items are placed into the grid when there is not enough space defined. It can place items in rows, columns, or dense packing.
/* Example: Items will flow into rows automatically */
grid-auto-flow: row;
The `justify-content` property adjusts the alignment of the entire grid within its container. It can be used to align the grid to the start, end, center, or spread out evenly.
/* Example: Aligns the grid items to the start of the container */
#container {
display: grid;
justify-content: start;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
The `align-content` property adjusts how the grid items are spaced out vertically within their container, similar to how `justify-content` works horizontally.
/* Example: Aligns the grid items to the center of the container */
#container {
display: grid;
align-content: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools