@realsale
Posted
Yo! Lee,
In these case, I think what you really need is how to center grid items(rows/cols) and not the grid itself.
In order for you to align grid items, you must define your grid(container) dimension first, by setting it's width and height.
If you haven't set the grid's height for example, then the grid is as tall as the grid items, therefore you can't visually see it's vertical alignment.
- You can center grid items by specifying
justify-contentandalign-contentproperty tocenter. - There is also a shorthand property
place-contentthat sets bothjustify-contentandalign-content
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
.grid {
display: grid;
grid-template-columns: 250px 250px 250px; /* 3 columns with 250px width */
grid-template-rows: 600px; /* 1 row with 600px height */
height: 100vh; /* 100 viewport height */
place-content: center; /* shorthand for justify-content & align-content property */
}
Marked as helpful
@lee-fentress
Posted
@realsale how do you adjust the border radius after you do that?
@realsale
Posted
Yo! @lee-fentress,
In this very case, in order for you to set the child's border-radius is thru attribute selectors
to select/target the first and last child of an element, you can use .grid-container div:first-child then set border-top-left-radius and border-top-right-radius property of the first child
and in the last-child you can use .grid-container div:last-child then set the respective styles.
You can also use attribute selectors of this approach [class|="grid-item"]:first-child and [class|="grid-item"]:last-child
Marked as helpful
@realsale
Posted
The easiest approach is to set border-radius and overflow: hidden to wrapper element.
@lee-fentress
Posted
@realsale thank you
@realsale
Posted
@lee-fentress welcome bro, glad I can be of help.
