How to center content and make the background cover the full column when using CSS Grid?

by

Without place-items: center; your grid items will get stretched to cover all the area (the default behavior in most of the cases) that’s why the background will the cover a big area:

enter image description here

With place-items: center; your grid item will fit their content and they will be placed in the center; thus the background will cover only the text.

enter image description here

To avoid this, you can center the content inside the p (your grid item) instead of centering the p. Don’t forget to also remove the default margin to cover a bigger area:

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  place-items: stretch; /* this is the default value in most of the cases so it can be omitted */
  grid-gap: 20px;
}

p {
  background-color: #eee;
  /* center the content (you can also use flexbox or any common solution of centering) */
  display: grid; /* OR inline-grid */
  place-items: center;
  /**/
  margin: 0;
}
<main>
  <p>box1</p>
  <p>box2</p>
  <p>box3</p>
  <p>box4</p>
</main>

More Related Contents:

  1. Make a div span two rows in a grid
  2. Prevent content from expanding grid items
  3. Why aren’t my grid-template-areas with ASCII art not working?
  4. Why does minmax(0, 1fr) work for long elements while 1fr doesn’t?
  5. Aligning grid items across the entire row/column (like flex items can)
  6. Position deeply nested elements in a higher level grid container
  7. Align child elements of different blocks
  8. Browser support for CSS Grid
  9. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  10. Why are CSS named grid areas not in quotes?
  11. What is the difference between auto-fill and auto-fit?
  12. How to make the items in the last row consume remaining space in CSS Grid?
  13. A grid layout with responsive squares
  14. Create a Masonry grid with flexbox (or other CSS)
  15. Why percentage value within grid-gap create overflow in CSS grid?
  16. Using CSS transitions in CSS Grid Layout
  17. How can I make a div span multiple rows and columns in a grid?
  18. CSS Grid – Auto height rows, sizing to content
  19. How to make a column span full width when a second column is not there? (CSS Grid)
  20. Can I have a varying number of columns per row in a CSS grid?
  21. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  22. Percentage padding / margin on grid item ignored in Firefox
  23. Setting different lengths for grid gaps in CSS Grid
  24. How do you collapse unused row in a CSS grid?
  25. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  26. Is a button allowed to have display:grid? [duplicate]
  27. grid-area does not seem to work with the attr function, is this by design?
  28. minmax fails (invalid property value)
  29. Getting columns to wrap in CSS Grid
  30. Why doesn’t min-content work with auto-fill or auto-fit?

Leave a Comment