Why aren't these grid elements moving next to each other?

I'm using the following scheme in a 3-column grid layout:

    img:nth-of-type(2n-1) {
        grid-column: 3;
    }
    img:nth-of-type(2n) {
        grid-column: 1;
    }
    article:nth-of-type(2n-1) {
        grid-column: 1 / 3;
        padding-right: 4rem;
    }
    article:nth-of-type(2n) {
        grid-column: 2 / 4;
        padding-left: 4rem;
    }

    img:nth-of-type(2n-1) {
        grid-column: 3;
    }
    img:nth-of-type(2n) {
        grid-column: 1;
    }
    article:nth-of-type(2n-1) {
        grid-column: 1 / 3;
        padding-right: 4rem;
    }
    article:nth-of-type(2n) {
        grid-column: 2 / 4;
        padding-left: 4rem;
    }

Articles are the text blocks seen in the image.

3 Replies

maxOP•7mo ago

Chris Bolson•7mo ago

You will probably need to provide more context. HTML and CSS. Ideally in a codepen. That said, from the little code that you have shown, the article is defined after the image. Si, if the image is set to be in the last cell of the grid row, the article will automatically start on the next row. If you want it on the same row you will either have to move it before the image in the markup or, probably what you are looking for, set the article grid-row to 1. An alternative method would be to define grid-template areas.

Mannix•7mo ago

yeah as Chris said you gotta specify the row for them or go with the areas 🙂 by default the element will jump to the next row

Gaming

Programming

Why aren't these grid elements moving next to each other?