Hello,
I have a grid with grid-gaps, and I would like to put a background color in my grid cells that doesn’t also color the grid-gaps. I have text in my cells, and when I center my text with align-items and justify-items, the background color only colors the text instead of the entire cell. How can I fill the cell with a color? I have attached a couple screenshots to show what happens when I center the text.
Thanks!!
Welcome, kpei.
This lesson could be beneficial to you: https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-row-to-control-spacing
Hope this helps
How are you coloring the grid cells? It should not affect the gap.
Anyway, what you are seeing is because of justify-items.
centerThe items are packed flush to each other toward the center of the of the alignment container.
I originally tried to set the background color of the grid, but then the cells and the spaces between them were that color, so instead of multiple colored blocks I just had one long colored rectangle. Currently I have the background color of the text set. The text background fills the whole cell before I center the text, but afterwards it is only around the text and doesn’t fill the entire cell. There must be a better way to do this, I just haven’t been able to figure out how.
If all you want is to center the text just use text-align: center instead of justify-items.
But I assume it is a contrived example and that you do not plan to have numbers inside the grid cells. It would help if you gave more context about what you are planning to use the grid for.
I’m working on the Tribute project in the Responsive Web Design Certification. I am making this timeline, and I would like the cells that the dates and the descriptions are in to be filled with a background color. I would like the dates to be centered in the middle of the cell. Currently, the background color only covers the text and does not extend to the rest of the cell. Is there a way I can fill the entire cell?
Can you please post a link to the Codepen instead of an image.
I can’t tell from an image if the cells are the size of their content or larger and the background color really isn’t covering the cell. Check in the developer tools that the cells are the size you think they are. Firefox has a nice grid inspector that can be helpful when working with CSS Grid.
The h2 and p elements have a top/bottom margin and background color does not extend to the margin. I’d remove the margin and use flexbox (or grid) on the grid items to center the elements.
https://jsfiddle.net/k5qgrj1p/
Also, the percentages you have on the main grid and fix height on the grid rows are going to make the content overflow at small screen sizes. So you will need to adjust it at some point or make it more flexible so the grid can contain the elements at smaller screen sizes.
I tried to fix the overflow problem using the @media section at the bottom of my CSS code, but I’m seeing no change from what it was doing before. How would you recommend keeping the content from crowding itself?
