Скачать или смотреть How to Properly Center Content in CSS Grid Items

Learn how to effectively center content within a CSS grid item using appropriate properties and techniques.
---
This video is based on the question https://stackoverflow.com/q/66610670/ asked by the user 'Sam' ( https://stackoverflow.com/u/15089179/ ) and on the answer https://stackoverflow.com/a/66610990/ provided by the user 'Gowtham Raj J' ( https://stackoverflow.com/u/2843408/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: I am unable to center content in a grid item with justify-content: center; or justify-items: center. What am I doing wrong?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Properly Center Content in CSS Grid Items

Centering content within grid items in CSS can be a bit tricky if you're not familiar with how the properties work together. In this guide, we'll address a common question: why isn't justify-content: center; or justify-items: center; working for centering content in your grid items? We'll break down how to fix this issue and ensure your text is neatly aligned within its grid space.

Understanding the Grid Layout

Before diving into the solution, let's clarify how the grid layout operates:

Grid Container: This is the parent element that uses display: grid;. It contains the grid items (child elements).

Grid Items: These are the child elements inside the grid container that you want to style, such as divs or paragraphs.

When using CSS properties like justify-content and justify-items, it’s crucial to understand where and how they apply:

justify-content: This property is used on the grid container to arrange the entire grid’s children along the main (horizontal) axis.

justify-items: This property applies to each grid item to control the alignment of their inner content along the horizontal axis.

Why Your Centering Attempt Might Fail

In your code snippet, you are attempting to center a paragraph within a grid item. However, the paragraph tag <p> is currently the only child of the grid item, and it takes up the entire width of that grid item. Here's why your approach might not be giving you the desired visual effect:

The p tag occupies the full width of its container, leaving no remaining space for justify-content or justify-items to effectively work.

To see the centering effect, the child element must have a defined width or a flex-basis, allowing it to not take up all the available space.

Correcting Your Code for Proper Centering

To resolve this issue, you can follow these steps to adjust your CSS to achieve proper centering of the content.

1. Update Your CSS

Here’s the modified CSS code you should use for centering the content:

[[See Video to Reveal this Text or Code Snippet]]

2. HTML Structure

The HTML structure remains essentially the same, but here it is for reference:

[[See Video to Reveal this Text or Code Snippet]]

Key Adjustments Explained

Flexbox: Using display: flex; on the grid items ensures you can leverage both justify-content and align-items effectively.

Flex-basis: By setting flex-basis: 50%; for your paragraph, you restrict it to only occupy half the width of the .grid-items, allowing for centering to take effect.

Conclusion

Centering content in a grid can appear complicated at first glance, but once you understand how justify-content, justify-items, and widths work together, it becomes a straightforward task. By making sure your child elements have defined widths, you can effectively center them within their parents.

Experiment with the code provided above to see how these adjustments work for your specific layout, and happy coding!