[Resolved] How to define grid-columns without space between columns and rows

[Hans-Hermann Loewer]

Hi Tom and Team,

how can I define (with CSS?) grid-columns without space between columns and rows (means: shown as one single picture /full screen) on one special page within my wordpress site?

I’m using Html as follows:

[img-content]

[img-content]

<br />

[img-content]

[img-content]

Would be perfect, if I could delete background-pictures for that site too
(customizer: backgroundpictures –> content –> uploaded image).

Thanks in advance!
Hermann

[Hans-Hermann Loewer]

Sorry, the html-tags were deleted by the forum-software.

I´m using div classes with 50%, 50% for tablet, 100% for mobile in each column, in 2 rows.

[Elvin]

Hi,

Sorry, the html-tags were deleted by the forum-software.

You can use the “CODE” formatting tool so the html-tags display in text form on your replies.
https://share.getcloudapp.com/ApuLZXZy

how can I define (with CSS?) grid-columns without space between columns and rows (means: shown as one single picture /full screen) on one special page within my wordpress site?

There are plenty of reasons why there are “space” between columns and rows. To remove this “space” we must first know what is causing it. But all of them can easily be dealt with using custom CSS.

If the space is caused by a margin or padding, we can simply add “margin: 0px; padding: 0px;” CSS property to the CSS selector.

If container is actually using display:grid; and uses grid-gap(horizontal and vertical), grid-row-gap(horizonal) or grid-column-gap(vertical), we can use this properties to also remove them by setting 0px value much like what we did with margin and padding.

Example:

.your-grid{
display:grid;
grid-gap: 0px;
}

https://www.w3schools.com/cssref/pr_grid-gap.asp

You may find this useful: https://css-tricks.com/snippets/css/complete-guide-grid/

A wise man once said:
"Have you cleared your cache?"

[Hans-Hermann Loewer]

Hi Elvin,

meanwhile I could delete the horizontal space between the columns with the following code for the first row:

@media (min-width: 782px) {
.grid-25 {
    padding: 0;
}
}

and for the second row with:

@media (min-width: 782px) {
.grid-33 {
    padding: 0;
}
}

But how can I delete the space between the two rows too?

Thanks in advance for your help!
Hermann

[Hans-Hermann Loewer]

Additional info:
Everything OK now.
There was a <br /> -tag with a   behind the first row.

[Elvin]

Additional info:
Everything OK now.
There was a <br /> -tag with a   behind the first row.

Good catch! Glad to be of any help. 😀

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts