Menu
or, more generally, are there any elements that can't be styled with display:grid?
Consider:
button, div { display: grid; grid-template-columns: 50px 50px; } /* Nevermind these, they're just for a consistent display */ button, div { border: 0; background-color: gray; color: black; width: 100px; text-align: center; font-family: sans-serif; font-size: 14px; padding: 0; }Button: <button> <span>A</span> <span>B</span> </button> <br> Div: <div> <span>A</span> <span>B</span> </div>Try it on JsFiddle
This is the result in Firefox (61.0.1):
And this is the result in Chrome (68.0.3440.106):
Chrome seems to dislike that I'm trying to use display:grid on a button. Is this just a bug? Or is it intended somehow?
523
You can also use the shorthand repeat code like above to make the columns repeat. For example, “grid-template-columns:repeat (9, 1fr);” shows the combined commands that specify the fraction code and the number of columns.
The repeat() function takes two arguments: repeat count: the first argument specifies the number of times that the track list should be repeated. It is specified with an integer value of 1 or more, or with the keyword values auto-fill or auto-fit .
It is definitely safe to use.
A button grid is a group of similar buttons, such as buttons for products, operations, or payments. Microsoft Dynamics AX for Retail POS can display up to five button grids in a screen layout. When you create a new button grid, buttons are created based on the number of columns and rows that you specify.
Apparently it's a bug on Chrome which detailed here:
https://github.com/rachelandrew/gridbugs#10-some-html-elements-cant-be-grid-containers
And tracked here:
https://bugs.chromium.org/p/chromium/issues/detail?id=375693
(I don't see a progress here. If it fixed, please edit the answer or I will if I remember)
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
