1

When I use repeat(auto-fit) I get a responsive design for my columns and it works for desktop and mobile. But when I adjust my responsive viewport so that it fits 2 columns and the 3rd goes under, the third is placed to the left. I want it to be placed in the center, to resemble a Y shape.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 0.6fr));
    grid-template-rows: 1000px 1000px 1000px;
    grid-gap: 70px;
    padding: 10px;
    margin: 100px 100px;
}

.grid-container .column {
    background-color: #9c1f0a;
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
    border-radius: 20px;
}
<div class="grid-container">
    <div id="left" class="column">
        <span>COLUMN1</span>
    </div>
    <div id="center" class="column">
        <span>COLUMN2</span>
    </div>
    <div id="right" class="column">
        <span>COLUMN3</span>
    </div>
</div>
mhhabib
  • 2,975
  • 1
  • 15
  • 29
AleksandarVolkov
  • 11
  • 4
  • 2
    Its not possible with the grid, since grid strictly follow the row and column structure, elements cannot overflow outside grid cell, you can make the third row span across the two columns when it hits specific viewport width, but in the question you specified you need it in 'y' shape, so I think the flexbox will be the best way to achieve that type of layout – Prathamesh Koshti Nov 22 '20 at 18:02
  • As far as I know, you can't center it in a two-column layout using grid properties. – Shounak Das Nov 22 '20 at 18:05

0 Answers0