3 column card

Community feedback

• 

  jerry•300

  @realsalePosted over 2 years ago

  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-content and align-content property to center.
  • There is also a shorthand property place-content that sets both justify-content and align-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

  0

  ---

  

  Lee Fentress•30

  @lee-fentressPosted over 2 years ago

  @realsale how do you adjust the border radius after you do that?

  0

  

  jerry•300

  @realsalePosted over 2 years ago

  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

  0

  

  jerry•300

  @realsalePosted over 2 years ago

  The easiest approach is to set border-radius and overflow: hidden to wrapper element.

  0

  

  Lee Fentress•30

  @lee-fentressPosted over 2 years ago

  @realsale thank you

  0

  

  jerry•300

  @realsalePosted over 2 years ago

  @lee-fentress welcome bro, glad I can be of help.

  0