justify-self
- The `justify-self` property in CSS Grid layout controls the horizontal alignment of grid items within their cells. It can be used to position items to the start, end, center, or stretch them to fill the cell.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(3, 150px);
}
.grid-item1 {
background-color: rgb(189, 113, 113);
}
.grid-item2 {
background-color: rgb(60, 221, 221);
justify-self: center;
}
.grid-item3 {
background-color: rgb(216, 218, 119);
}
.grid-item4 {
background-color: rgb(140, 87, 184);
}
.grid-item5 {
background-color: rgb(189, 91, 151);
}
.grid-item6 {
background-color: rgb(120, 180, 81);
}
.grid-item7 {
background-color: rgb(126, 46, 46);
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item1">item1</div>
<div class="grid-item2">item2</div>
<div class="grid-item3">item3</div>
<div class="grid-item4">item4</div>
<div class="grid-item5">item5</div>
<div class="grid-item6">item4</div>
<div class="grid-item7">item5</div>
</div>
</body>
</html>
- By default, grid items inherit the value from the container's `justify-items` property. However, `justify-self` can be applied directly to override the inherited value and set individual alignment. It offers flexibility in positioning and layout design for grid items.
align-self
- The `align-self` property in CSS Grid layout controls the vertical alignment of grid items within their cells. It allows you to position items to the start, end, center, or stretch them vertically.
.grid-item2 {
background-color: rgb(60, 221, 221);
align-self: center;
}
- By default, items inherit the value from the container's `align-items` property. However, `align-self` can be used to override the inherited value and set individual alignment. It provides flexibility in vertical layout design for grid items.
- Use both properties justify-self and align-self:
.grid-item2 {
background-color: rgb(60, 221, 221);
justify-self: center;
align-self: center;
}
place-self
- This property is the combination of two property which is justify-self and align-self.
- The place-self CSS grid property is used to control the alignment of a grid item within its grid cell in both the horizontal and vertical directions. It allows you to set the alignment for a specific grid item individually, overriding the default alignment set by the grid container.
- The place-self property accepts two values: the first value controls the horizontal alignment, and the second value controls the vertical alignment. You can use various keywords to specify the alignment, such as start, end, center, and stretch, among others. Additionally, you can use auto to let the grid container determine the alignment automatically.
.grid-item1 {
background-color: rgb(189, 113, 113);
place-self: center end;
}
- In CSS Grid layout, the grid-column-start and grid-column-end properties are used to define the horizontal placement of grid items within a grid container. They allow you to specify the starting and ending positions of a grid item across the grid columns.
- Here's how these properties work:
- grid-column-start sets the starting position of a grid item within the grid columns. It defines which vertical grid line the item should start at.
- grid-column-end sets the ending position of a grid item within the grid columns. It defines which vertical grid line the item should end at.
- You can use various values to define the positions:
- Numerical values: You can use line numbers to specify the exact position of the grid item. For example, grid-column-start: 2 will place the item starting at the second vertical grid line.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(4, 100px);
}
.grid-item1 {
background-color: rgb(189, 113, 113);
}
.grid-item2 {
background-color: rgb(60, 221, 221);
grid-column-start: 2;
grid-column-end: 4;
}
.grid-item3 {
background-color: rgb(216, 218, 119);
grid-column-start: 1;
grid-column-end: -1;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-column-start: 1;
grid-column-end: 3;
}
.grid-item5 {
background-color: rgb(189, 91, 151);
}
.grid-item6 {
background-color: rgb(120, 180, 81);
}
.grid-item7 {
background-color: rgb(126, 46, 46);
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item1">item1</div>
<div class="grid-item2">item2</div>
<div class="grid-item3">item3</div>
<div class="grid-item4">item4</div>
<div class="grid-item5">item5</div>
<div class="grid-item6">item4</div>
<div class="grid-item7">item5</div>
</div>
</body>
</html>
- Named lines: If you have named lines in your grid, you can use those names as values. For example, grid-column-start: sidebar-start will place the item starting at the line named "sidebar-start".
- Spanning multiple columns: You can use the span keyword followed by a number to define the number of columns the item should span. For example, grid-column-end: span 2 will make the item end at a line two columns away from the start.
.grid-item2 {
background-color: rgb(60, 221, 221);
grid-column-start: 2;
grid-column-end: span 2;
/* grid-column-end: 4; */
}
.grid-item3 {
background-color: rgb(216, 218, 119);
grid-column-start: 1;
grid-column-end: span 3;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-column-start: 1;
grid-column-end: span 2;
}
grid-column
- The shorthand property for grid-column-start and grid-column-end in CSS Grid layout is grid-column. It allows you to specify both the starting and ending positions of a grid item in a single declaration.
- You can specify different values for grid-column-start and grid-column-end, respectively. This allows you to create grid items that span multiple columns. For example:
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-column: 2 / 4;
/* Item starts at the second vertical grid line and ends at the fourth vertical grid line */
}
grid-row-start and grid-row-end
- In CSS Grid layout, the `grid-row-start` and `grid-row-end` properties are used to define the vertical placement of grid items within a grid container. They allow you to specify the starting and ending positions of a grid item across the grid rows.
- Here's how these properties work:
- grid-row-start sets the starting position of a grid item within the grid rows. It defines which horizontal grid line the item should start at.
- grid-row-end sets the ending position of a grid item within the grid rows. It defines which horizontal grid line the item should end at.
- You can use various values to define the positions:
- Numerical values: You can use line numbers to specify the exact position of the grid item. For example, `grid-row-start: 2` will place the item starting at the second horizontal grid line.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(4, 100px);
}
.grid-item1 {
background-color: rgb(189, 113, 113);
grid-row-start: 1;
grid-row-end: 3;
}
.grid-item2 {
background-color: rgb(60, 221, 221);
grid-row-start: 1;
grid-row-end: 2;
}
.grid-item3 {
background-color: rgb(216, 218, 119);
grid-row-start: 1;
grid-row-end: 4;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-row-start: 2;
grid-row-end: -1;
}
.grid-item5 {
background-color: rgb(189, 91, 151);
}
.grid-item6 {
background-color: rgb(120, 180, 81);
}
.grid-item7 {
background-color: rgb(126, 46, 46);
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item1">item1</div>
<div class="grid-item2">item2</div>
<div class="grid-item3">item3</div>
<div class="grid-item4">item4</div>
<div class="grid-item5">item5</div>
<div class="grid-item6">item6</div>
<div class="grid-item7">item7</div>
</div>
</body>
</html>
- Named lines: If you have named lines in your grid, you can use those names as values. For example, `grid-row-start: header-start` will place the item starting at the line named "header-start".
- Spanning multiple rows: You can use the `span` keyword followed by a number to define the number of rows the item should span. For example, `grid-row-end: span 2` will make the item end at a line two rows away from the start.
.grid-item1 {
background-color: rgb(189, 113, 113);
grid-row-start: 1;
grid-row-end: span 2;
}
.grid-item2 {
background-color: rgb(60, 221, 221);
grid-row-start: 1;
grid-row-end: span 1;
}
.grid-item3 {
background-color: rgb(216, 218, 119);
grid-row-start: 1;
grid-row-end: span 3;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-row-start: 2;
grid-row-end: span 4;
}
- The grid-row CSS property is used to specify the location and sizing of grid items within a CSS grid container. It allows you to control the placement of items along the grid's vertical axis.
.grid-item3 {
background-color: rgb(216, 218, 119);
/* grid-row-start: 1;
grid-row-end: span 3; */
grid-row: 1 / span 3;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
/* grid-row-start: 2;
grid-row-end: span 4; */
grid-row: 2 / 5;
}
- The grid-row property can be applied to individual grid items within the grid container, allowing you to control their placement independently. Additionally, you can use the shorthand grid-area property to set both the row and column positions of an item in a single declaration.
grid-area
- The `grid-area` CSS property is a shorthand property that allows you to set all the positional properties of a grid item within a CSS grid container in a single declaration. It combines the values for `grid-row-start`, `grid-column-start`, `grid-row-end`, and `grid-column-end` into one concise property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(4, 100px);
}
.grid-item1 {
background-color: rgb(189, 113, 113);
grid-area: 1 / 1 / 4 / 1;
}
.grid-item2 {
background-color: rgb(60, 221, 221);
}
.grid-item3 {
background-color: rgb(216, 218, 119);
grid-area: 2 / 3 / 4 / 3;
}
.grid-item4 {
background-color: rgb(140, 87, 184);
grid-area: 2 / 2 / span 3 / span 1;
}
.grid-item5 {
background-color: rgb(189, 91, 151);
}
.grid-item6 {
background-color: rgb(120, 180, 81);
}
.grid-item7 {
background-color: rgb(126, 46, 46);
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item1">item1</div>
<div class="grid-item2">item2</div>
<div class="grid-item3">item3</div>
<div class="grid-item4">item4</div>
<div class="grid-item5">item5</div>
<div class="grid-item6">item6</div>
<div class="grid-item7">item7</div>
</div>
</body>
</html>
No comments:
Post a Comment