Display: grid; help?

[yasinkarax]

Hi, I have a design like this.
I’m converting the layout to a grid when the screen is larger than 1000px. Rows are added automatically. The next section and footer come to the top of the grid. How can I fix it?

[Jimbalin]

Grid is two dimensional

Is there a reason you have this code on your id daily slider?

height: 10px;

If you want the footer at the bottom, you can make the footer take up the last row

[yasinkarax]

I deleted the height in id daily-slider and it fixed. easy mistake

[raphaelle]

Hi!
It doesn’t seem like you have the grid setup. You could do something like this with a
3x5 grid for .container (or the element that contains all the items you want on the grid.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.header {grid-area: 1 / 1 / 2 / 4; }
.left_div { grid-area: 2 / 1 / 5 / 2; }
.middle_div { grid-area: 2 / 2 / 5 / 3; }
.right _div { grid-area: 2 / 3 / 5 / 4; }
.footer { grid-area: 5 / 1 / 6 / 4; }

You may need to remove display: grid; from other elements in the stylesheet.

[yasinkarax]

Thanks i fixed .
Thanks i fixed .