Say Goodbye to Layout Hassles: A Guide to CSS Grid and Flexbox
Master CSS Grid and Flexbox to Simplify Your Layout Challenges
Creating a layout and arranging elements on a web page can be quite challenging, and it becomes even more difficult when a client requests a responsive web application. Fortunately, CSS offers Flexbox and Grid to help solve this problem.
Flexbox
Flexbox is a layout model which helps in arranging the components in rows and columns. Just like a graph has a X-axis and Y-axis the flexbox layout has a Main Axis and Cross Axis.
Basic Syntax
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container {
border: 2px solid black;
}
.item {
border: 2px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
OUTPUT
Now what if I add the flexbox
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container {
border: 2px solid black;
height: 300px;
display:flex;
}
.item {
border: 2px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
Here, we have changed the direction of block-level elements from a column layout to a row layout. Now we can align the items however its required.
.container {
border: 2px solid black;
height: 300px;
display:flex;
justify-content: center; /*Aligning the element to center through main-axis*/
align-items: center; /*Aligning the element to center through cross-axis*/
}
Now lets discuss the most important properties of the Flexbox.
Flexbox container properties
a. display
Values:
flex,inline-flexEnables Flexbox on the container.
b. flex-direction
Values:
row,row-reverse,column,column-reverseDefines the direction of the main axis (horizontal or vertical).
c. justify-content
Values:
flex-start,flex-end,center,space-between,space-around,space-evenlyAligns items along the main axis (horizontal alignment for
row).
d. align-items
Values:
stretch(default),flex-start,flex-end,center,baselineAligns items along the cross axis (vertical alignment for
row).
e. align-content
Values:
stretch(default),flex-start,flex-end,center,space-between,space-aroundAligns multiple rows (only applies when
flex-wrapis set).
f. flex-wrap
Values:
nowrap(default),wrap,wrap-reverseControls whether items wrap to the next line or stay in a single line.
g. gap
Specifies spacing between flex items (rows and columns).
Example:
gap: 10px;
Flexbox item properties
a. flex (Shorthand for three properties)
flex-grow,flex-shrink, andflex-basiscan be combined.Example:
flex: 1 1 auto;
b. flex-grow
Defines how much an item should grow relative to others.
Default:
0(do not grow).
c. flex-shrink
Defines how much an item should shrink relative to others.
Default:
1(shrink if needed).
d. flex-basis
Specifies the initial size of a flex item before space distribution.
Example:
flex-basis: 200px;
e. align-self
Values:
auto(default),flex-start,flex-end,center,baseline,stretchAllows individual items to override the
align-itemsproperty.
f. order
Specifies the order of items (default:
0).Example: Items with
order: 1appear after those withorder: 0.
Grids
CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. Unlike Flexbox, which mainly handles one dimension (either row or column), Grid lets you work with both rows and columns at the same time, making it perfect for complex layouts.
Key Features of CSS Grid
Two-Dimensional Layouts:
- Grid handles rows and columns together, allowing for precise control over layout structure.
Explicit and Implicit Grids:
Explicit Grid: Defined by specifying the rows and columns in the container.
Implicit Grid: Automatically created by Grid when items overflow the defined structure.
Responsive Design:
- Grid simplifies the creation of responsive layouts without the need for media queries in many cases.
Key Properties of CSS Grid
1. Container Properties (Applied to Parent)
display: gridorinline-grid:Enables the grid layout.
gridis block-level;inline-gridis inline-level.
grid-template-rows/grid-template-columns:Defines the structure of rows and columns.
grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto 200px;
grid-gap/row-gap/column-gap:Adds spacing between rows and/or columns.
grid-gap: 10px;
grid-template-areas:
Creates named grid areas for easier layout organization
grid-template-areas: "header header" "sidebar main" "footer footer";justify-items:Aligns items horizontally within their grid cells.
Values:
start,end,center,stretch.
align-items:Aligns items vertically within their grid cells.
Values:
start,end,center,stretch.
place-items(Shorthand):- Combines
justify-itemsandalign-items.
- Combines
justify-content/align-content:- Controls alignment of the entire grid within the container.
2. Item Properties (Applied to Children)
grid-column/grid-row:Specifies where an item starts and how many columns/rows it spans.
grid-column: 1 / 3; /* Spans from column 1 to 3 */
grid-area:- Assigns an item to a named grid area (defined in
grid-template-areas).
align-self/justify-self:- Aligns an individual grid item within its cell.
- Assigns an item to a named grid area (defined in
Conclusion
CSS Grid simplifies creating responsive, two-dimensional layouts with precise control over rows and columns. It's perfect for modern web design, enabling dynamic, adaptable structures. Master its properties, combine it with Flexbox, and elevate your layouts to the next level!