How can I control the column space according number of elements with CSS grid

Question

For example, I'd like to use a class which has at the most 3 columns, but If I had just 2 elements, this row gonna align this elements to the center Is it possible with CSS grid?

in the example below, I'd like to center the elements of second line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <style>
        .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
        }

        .grid > div {
        height: 100px;
        width: 100px;
        background-color: red;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

DEMO

Use flexbox, not grid. The picture you linked is not in a grid layout. — jhpratt, Jul 30 '18 at 00:50
But I can't control at the max number of elements per row with flexbox. Because I just want 3 element at the most. The image is just an example — Henrique, Jul 30 '18 at 01:00
You can absolutely have a maximum number. Please post your attempts and we can help! — jhpratt, Jul 30 '18 at 01:03
Here is an code that I'm trying, I'd like to center the seconde row http://jsfiddle.net/auvybejx/ — Henrique, Jul 30 '18 at 01:33
I'll try it, from what I’ve seen isn't possible to control the number of columns with grid — Henrique, Jul 30 '18 at 02:07
@dasfdsa I did it with flexbox http://jsfiddle.net/zaLh7om9/ — Henrique, Jul 30 '18 at 12:00
When there is only one block, it takes whole width. Good solution though. — dasfdsa, Jul 30 '18 at 12:19

score 0 · Answer 1 · answered Jul 30 '18 at 01:10

0

Using JavaScript, you can check if the row only has two elements, then:

Move the second element to the third column
Delete the middle column

This way that row will only have 2 columns, and will be aligned to center.

answered Jul 30 '18 at 01:10

Brian Matus

19
3

You can't delete columns when using grid. – jhpratt Jul 30 '18 at 01:21

score 0 · Answer 2 · answered Jul 30 '18 at 12:02

I think I did the result that I was looking for with flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <style>
        .grid {
            display: flex;
            flex-wrap:wrap;
        }

        .grid > div {
            background: red;
            height: 100px;
            margin: 10px;
            flex-grow: 1;    
           width: calc(100% * (1/3) - 10px - 10px);
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>
</html>

DEMO

How can I control the column space according number of elements with CSS grid

2 Answers2