+ 2

Help with CSS Please!

I am trying to figure out how to position buttons correctly using CSS Grid Layout, i have just been experimenting so far and can not figure out what I am doing wrong, all help is appreciated. My CSS #GUIContainer { display:grid; grid-template-columns: auto auto auto; } #Tokens{ grid-column-start:4 grid-column-end:4 background-color: #3deb54; /*Lime Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; } #Profile{ background-color: #3deb54; /* Lime Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } #Catalog{ background-color: #3deb54; /* Lime Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } My HTML <html> <head> <link rel="stylesheet" href="TradingPost.css"> <title>Trading Post</title> </head> <div id="GUIcontainer"> <button id="Catalog" height=20 width=20>Catalog</button> <button id="Tokens" height=20 width=20>Tokens</button> <button id="Profile" height=20 width=20>Profile</button> </div> </html> I have just been using w3schools for CSS, I am not very familiar with the language yet. Thank you for your help!

html css html5 code dev web

17th Sep 2018, 11:42 PM

George Ryan

3 Answers

+ 1

Okay, for what i understand with what you want to do : - Don't forget to put your semi-columns after your "grid-column-start" and "grid-column-start" parameters, it messes with all the rest of that "Tokens" selector - If what you want is your 3 buttons to be on the same line and adjusting the width of each on as you wish, you should specify the width of the grid template, like that : grid-template-columns: repeat(4, 1fr); (4 columuns, each one of 1 unit) - Then you can play with your different buttons by using either "grid-column" and "grid-row" or "grid-column-start" and "grid-column-end" as you did - This page on the mozilla developer site could help you setting a bit more what you exactly want : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout Hope this helps Cheers

18th Sep 2018, 12:16 AM

Nicolas Bonnet

+ 1

Hi ! I'm looking at your code at the moment. Be right back soon, stay tuned Could you precise what you want to do with grid ? What output are you looking for ?

17th Sep 2018, 11:50 PM

Nicolas Bonnet

+ 1

I am just trying to move my buttons around the grid

17th Sep 2018, 11:58 PM

George Ryan