Problem using grids - centering text and using gaps

Question

I am learning to use grids in a website and have a couple of problems:

I can't center the text in grid items;

If I attempt to have a gap between columns it only gets inserted between the last 2 columns.

Is it possible that they are both due to the same error? I've tried margin-auto and various align and justify settings and none helped.

.wrapper1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-auto-rows: minmax(20px, auto);
}

.wrapper1 a {
    color: white;
}

.one {
    grid-column: 1 / 2;
    grid-row: 1;
    background-color: red;
}

.two {
    grid-column: 2 / 2;
    grid-row: 1;
    background-color: red;
}

<div class="wrapper1">
    <div class="one"><a href="/chart/world-vaccinations-map">World Vaccinations</a></div>
    <div class="two"><a href="/chart/world-capita-new-cases-map">World Cases</a></div>
</div>

@tacoshy gap is a property. see the [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) — bobsfriend12, Jan 20 '21 at 21:07
That is not correct @tacoshy, `grid-gap` was renamed to `gap` with all the other `grid-` prefix properties https://developer.mozilla.org/en-US/docs/Web/CSS/gap — Dominik, Jan 20 '21 at 21:07
@patricaW there are only 2 columns of course the gap only gets put in between the 2 columns. — bobsfriend12, Jan 20 '21 at 21:11
`gap` and `column-gap` is a valid property for grids also grid-gap is obsolete. — Pedro Uzcátegui, Jan 20 '21 at 21:22
@bobsfriend - I included an example with just 2 columns but the problem happens with more columns (for example 6). — PatriciaW, Jan 20 '21 at 22:42

Imran Rafiq Rather · Accepted Answer · 2021-01-21T15:53:45.930

0

It's working fine: Try below code, Have made basic additions. Basically you only have 2 columns set by grid-template-columns: repeat(2 ,minmax(0, 1fr));. Simply used text-align:center on the grid-container .wrapper-1. Rest all works as expected !!!

UPDATE: For any number of equal sizes columns below code snippet using CSS-Grids:

a{
  text-decoration:none;
  color:#fff;
}
.wrapper1{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}

.wrapper1 div{
  background:red;
  text-align:center;
}

<div class="wrapper1">
<div class="one"><a href="/one">One</a></div>

<div class="two"><a href="/two">Two</a></div>

<div class="three"><a href="/three">Three</a></div>

<div class="four"><a href="/four">Four</a></div>

<div class="five"><a href="five">Five</a></div>

<div class="six"><a href="six">Six</a></div>

</div>

edited Jan 21 '21 at 15:53

answered Jan 20 '21 at 21:08

Imran Rafiq Rather

7,677
1
16
35

yes, I was trying in codepen and it was working just fine. I would try to clear cache etc. – bobsfriend12 Jan 20 '21 at 21:09
I tried your suggestion with 6 columns and it doesn't work. The first 3 columns do not display and there is a gap between column 5 and 6. I'll open a new question. – PatriciaW Jan 20 '21 at 23:10
let me check :) You will probably have to use grid-template-columns: repeat(6 ,minmax(fit-content, 1fr)); – Imran Rafiq Rather Jan 20 '21 at 23:12
Thanks for checking. That resulted in one red row with empty cols 1 - 4, gap, col 5, gap, col 6 – PatriciaW Jan 21 '21 at 00:32
I've uploaded my code to jsfiddle: https://jsfiddle.net/PatriciaW/xnp48ke2/3/ – PatriciaW Jan 21 '21 at 01:44
Dear @PatriciaW : I think you are looking for this. Please check the link :-) https://codepen.io/emmeiWhite/pen/jOMRLYK Do let me know if there is anything else you are trying to achieve :-) HAPPY CODING – Imran Rafiq Rather Jan 21 '21 at 11:21
Wonderful ... that did it. I think the main changes you made were to move the text center and color to a new div definition and remove all of the css definitions for the columns. Much simpler. Many thanks. – PatriciaW Jan 21 '21 at 13:37
Given that your solution is part of a private conversation is there any way to make it public? – PatriciaW Jan 21 '21 at 16:58
I didn't get your question actually :-) The solution is public to everyone already. However this question has been closed :-) But still the question is public and people can still benefit from it :-) I have actually updated the answer to add the latest changes !!! – Imran Rafiq Rather Jan 21 '21 at 17:26
I removed the class="one" etc. since there weren't any class definitions for .one etc. That simplified it even more. Thanks – PatriciaW Jan 22 '21 at 01:59

Problem using grids - centering text and using gaps

1 Answers1