/    Sign up×
Community /Pin to ProfileBookmark

centering Css grid

Copy linkTweet thisAlerts:
Jun 03.2019

Hi ,

I have a grid and the code is like this

[code].logos-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(300px, 300px));
margin: 0 auto;
}
[/code]

It functions like I want , but the problem is that I can’t center it .
I also tried this

[code]
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
[/code]

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@KeverJun 03.2019 — You are setting the width of your grid container to 100% of it's parent, so there is no space around and therefor already centered. You can center the grid items inside the grid container by setting the justify-content property.
Copy linkTweet thisAlerts:
@codyhillauthorJun 03.2019 — @Kever#1604299 I fixed the issue . I don't know if you can say that the body is the parent of a div , But 100% of my grid was 100% of the body and it should have been centered but it wasn't. Not sure how that works. I did not wanted to center the items inside the grid , I wanted the grid to be centered inside the body . I simply fixed the issue by adding place-content: center; .

I've only worked with place-items: center but I ques that does the same thing as justify-content and align-items combined.
Copy linkTweet thisAlerts:
@PeterPan_321Jun 06.2019 — Just beware that many older browsers don't support 'grid'. I know, I know... many coders these days say "too bad for those that don't upgrade'. But depending on your target audience, you should always consider whether you can accomplish the same layout with the oldest (but not deprecated) features that work. Again, that's just my 2¢
Copy linkTweet thisAlerts:
@codyhillauthorJun 06.2019 — @PeterPan_321#1604402 Grid is too good not to be used . I can literally save hundreds lines of code by using grid as I don,t need to have a flex for every div and I don't have to make it responsive. Now this is my take from my 3 month coding experience hahah . Right now I am working on my portfolio. But as I get experience I will keep that in mind ! Maybe Until then browsers will update :D But thank you !
Copy linkTweet thisAlerts:
@SempervivumJun 06.2019 — @PeterPan_321#1604402 Interesting subject. Myself I'm still supporting IE11 and often others don't agree with doing so. However IE11's days are numbered and at the end of the year when support for Win 7 ends I'm going to stop it.
×

Success!

Help @codyhill spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...