I am very new to this so apologies in advance, I’m guessing this is quite a simple solution but I just cant seem to get it working
I am after html code and CSS for a grid system for 3 boxes, evenly spaced across the page on one line, each box with a different colour. With text in each box: Headings: ’ BUY’, ‘SELL’ and ‘WANTED’ . Underneath the heading, In each box, a text link: ‘Search | List Ad’
To look like this:
So far, I have this code for the html:
<div class="box a">BUY</div>
<div class="box b">SELL</div>
<div class="box c">WANTED</div>
(This is not showing the code, but displaying as a webpage for some reason, sorry!)
And this code for CSS:
grid-template-columns: 200px 200px 200px;
Any help would be greatly appreciated
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (
</>) will also add backticks around text.
Note: Backticks are not single quotes.
Do you want the spacing between the boxes to be fixed or fluid?
If you add
justify-content: space-evenly to the grid you will get fluid evenly spaced elements. If you add a max-width and margin auto, you get a fixed width.
The rest is not really CSS grid related, but whatever.
Thanks for your reply. I think fluid is best. Thanks very much for the code, the CSS is showing problems, is there excessive code in there I can delete?
Thank you, will keep that in mind
If you mean the
gap property, that is just jsfiddle. You can switch it out for
grid-gap which is the old (deprecated) property name. The
grid-gap property will still work as it is now just an alias for
gap. On browsers that support CSS Grid but do not receive updates you would have to use