The justify-content Property
The justify-content property is used to horizontally align the complete grid inside the container.
Syntax
.grid-box {
display: grid;
justify-content: space-between;
}
|
Property with Syntax |
Descriptions |
|---|---|
| justify-content: center; | The property aligns the complete grid to the center |
| justify-content: space-between; | The property distributes the complete space equally, leaving no space at the beginning or end. |
| justify-content: space-evenly; | The property distributes the equal space at the beginning, between, and at the end. |
| justify-content: space-around; | The property creates equal space at the beginning, between, and at the end. |
| justify-content: end; | The property aligns the complete grid to the end. |
| justify-content: start; | The property aligns the complete grid to the start. |
Example 1: The example illustrates property justify-content and value as space-between.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="grid-box"> <div class="divclass" id="div1">box1</div> <div class="divclass" id="div2">box2</div> <div class="divclass" id="div3">box3</div> <div class="divclass" id="div4">box4</div> <div class="divclass" id="div5">box5</div> <div class="divclass" id="div6">box6</div> <div class="divclass" id="div7">box7</div> <div class="divclass" id="div8">box8</div> <div class="divclass" id="div9">box9</div> </div> </body> </html> |
CSS
.grid-box{ display: grid; gap: 5px; grid-template-columns: 200px 200px auto; grid-template-rows: 50px 150px; justify-content: space-between; border: 2px solid green; background-color: rgb(188, 233, 188); padding: 10px; } .divclass{ border: 3px solid green; padding: 5px; text-align: center; } |
Output:
justify-content: space-between
Example 2: The example illustrates property justify-content and value as an end.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="grid-box"> <div class="divclass" id="div1">box1</div> <div class="divclass" id="div2">box2</div> <div class="divclass" id="div3">box3</div> <div class="divclass" id="div4">box4</div> <div class="divclass" id="div5">box5</div> <div class="divclass" id="div6">box6</div> <div class="divclass" id="div7">box7</div> <div class="divclass" id="div8">box8</div> <div class="divclass" id="div9">box9</div> </div> </body> </html> |
CSS
.grid-box{ display: grid; gap: 5px; grid-template-columns: 200px 200px auto; grid-template-rows: 50px 150px; justify-content: end; border: 2px solid green; background-color: rgb(188, 233, 188); padding: 10px; } .divclass{ border: 3px solid green; padding: 5px; text-align: center; } |
Output:
justify-content: end
Grid Container
The Grid Container is the container element where the property display with a value grid or the inline-grid is used for defining their direct children into a grid layout. The Grid Container offers various properties these are grid-template-columns Property, grid-template-rows Property, justify-content Property, and align-content property.
Table of Content
- Grid Container with display “grid” property
- The grid-template-columns Property
- The grid-template-rows Property
- The justify-content Property
- The align-content Property
We will explore the above topics with the help of suitable examples.