grid-template-columns:
The grid-template-columns property is used to define the size of columns in a grid container.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Template Columns</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 200px 150px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
grid-template-rows:
The grid-template-rows property is used to define the size of rows in a grid container.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Template Rows</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 50px 100px 75px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Grid Units:
Grid units are used to define column and row sizes in CSS Grid. You can use fixed values like pixels or flexible units like percentages or fractions.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Units</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 100px;
grid-template-rows: 50px 20%;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
grid-column-gap:
The grid-column-gap property is used to set the gap (space) between columns in a grid container.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Column Gap</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-column-gap: 20px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
grid-row-gap:
The grid-row-gap property is used to set the gap (space) between rows in a grid container.
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Row Gap</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 50px 50px;
grid-row-gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
CSS Aligning Content Inside Gridbox:
Aligning an Element:
You can align an element within a grid cell using the align-self and justify-self properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Aligning an Element</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
.item-2 {
align-self: end; /* Aligns the element to the bottom of the cell */
justify-self: center; /* Centers the element horizontally in the cell */
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item item-2">2</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Aligning All Elements:
You can align all elements within a grid container using the align-items and justify-items properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Aligning All Elements</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px;
align-items: center; /* Aligns all items vertically to the center */
justify-items: center; /* Centers all items horizontally */
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Splitting Grids into an Area:
You can split the grid into named areas using the grid-template-areas property.
<!DOCTYPE html>
<html>
<head>
<title>CSS Splitting Grids into an Area</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
grid-template-areas:
"header header"
"content sidebar";
}
.header {
grid-area: header;
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
.content {
grid-area: content;
background-color: lightgreen;
padding: 10px;
border: 1px solid black;
}
.sidebar {
grid-area: sidebar;
background-color: lightyellow;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="sidebar">Sidebar</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
repeat Function:
The repeat() function is used to repeat grid tracks a specified number of times.
<!DOCTYPE html>
<html>
<head>
<title>CSS repeat Function</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
CSS Gridbox Properties:
minmax Function:
The minmax() function is used to define a size range for grid tracks, allowing them to expand and contract based on available space.
<!DOCTYPE html>
<html>
<head>
<title>CSS minmax Function</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr minmax(100px, 200px) 1fr;
grid-template-rows: 100px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Flexible Layout - auto-fill:
The auto-fill value is used to create a flexible grid container that automatically creates new tracks to fill the available space.
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Layout - auto-fill</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: 100px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
auto-fit:
The auto-fit value is used to create a flexible grid container that automatically adjusts the number of tracks based on the available space.
<!DOCTYPE html>
<html>
<head>
<title>CSS auto-fit</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: 100px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Media Queries for Responsive Layouts:
Media queries can be used to create responsive grid layouts that change based on the viewport size or device type.
<!DOCTYPE html>
<html>
<head>
<title>Media Queries for Responsive Layouts</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 100px;
grid-gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
Creating Grid within Grids:
You can nest grids within grids to create more complex layouts.
<!DOCTYPE html>
<html>
<head>
<title>Creating Grid within Grids</title>
<style>
.outer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 10px;
height: 300px;
}
.inner-grid {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px;
grid-gap: 5px;
}
.grid-item {
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="outer-grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">
<div class="inner-grid">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------------------
0 Comments