Is a <Button> Allowed to Have Display:Grid

Is a button allowed to have display:grid?

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)}

Buttons in grid layout css

I used the grid-template-area rule to construct the objects the way you want:

.grid-container {
    display: grid;
    grid-template-areas: "button1 button2 button3"
                         "button4 button5 button5";
    grid-gap: 5px;
}

Also, each object (button) needs to be assigned a template:

.grid-item:nth-child(1) {
    grid-area: button1;
}

Also, you need to replace the fixed width of the buttons with 100%.

Was it necessary?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,body {
    height: 100%;
    font-size: 1rem;
}

#container {
    display: flex;
    width: 100%;
}

#first {
    border: 1px solid black;
    border-radius: 5px;
    width: 35%;
    height: 90vh;
    margin-left: 10px;
}

.grid_container {
    border: 1px solid black;
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px;
    background-color: green;
    padding: 10px;
}

.small_btn {
    width: 100%;
    height: 50px;
}

.big_btn {
    width: 100%;
    height: 50px;
}

#second {
    border: 1px solid black;
    border-radius: 5px;
    height: 90vh;
    width: 50%;
    margin-left: 10px;
}

.grid-container {
    display: grid;
    grid-template-areas: "button1 button2 button3"
                         "button4 button5 button5";
    grid-gap: 5px;
}

.grid-item:nth-child(1) {
    grid-area: button1;
}

.grid-item:nth-child(2) {
    grid-area: button2;
}

.grid-item:nth-child(3) {
    grid-area: button3;
}

.grid-item:nth-child(4) {
    grid-area: button4;
}

.grid-item:nth-child(5) {
    grid-area: button5;
}

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "avc_label_style.css">
  <title>Document</title>
</head>
<body>
  <div id = "container">
    <div id = "first">
      <div class = "grid-container">
        <div class="grid-item">
          <button type = "button" id = "b1" class = "small_btn">Button1</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b2" class = "small_btn">Button2</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b3" class = "small_btn">Button3</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b4" class = "small_btn">Button4</button>
        </div>
        <div class="grid-item">
          <button type = "button" id = "b5" class = "big_btn">Button5</button>
        </div>
      </div>
    </div>
    <div id = "second">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit quam et tellus tincidunt posuere. Vivamus malesuada sapien quis elit semper, tristique elementum lectus condimentum.         </p>
    </div>
  </div>
</body>
</html>

Why my button is on back of my grid? How can I bring both of my button to front of the grid?

You need to give:

.btn{
  position: relative;
}

This will solve your problem. Both buttons will come in front of the image.

Is it possible to put buttons under each element in a grid?

One approach might be to use CSS grid to achieve what you require. A simple grid layout for what you describe above could be done like this:

.item img {  width:100%;  /* Causes the button to sit below the img */  display:block;}
.item button {  width:100%;}
.grid {  /* Specifies css grid to be used */  display:grid;   /* Specifies the number of columns and sizes in the grid */  grid-template-columns: 1fr 1fr;  /* Specifies spacing between grid cells */  grid-gap:1rem;}

<div class="grid">  <div class="item">    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />    <button>Order</button>  </div>  <div class="item">    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />    <button>Order</button>  </div>  <div class="item">    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />    <button>Order</button>  </div>  <div class="item">    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />    <button>Order</button>  </div></div>

Problems with buttons / grid in HTML/CSS

You can use with flex, justify-content, align-items like example below:

.wrapped {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 500px;
}

.avatar {
 width: 50px;
 height: auto;
}

button {
 width: 200px;
}

.div1 {
 display: flex;
 justify-content: center;
 padding: 10px;
}

.div2 {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.div2 button{
 width: 200px;
 margin: 6px;
 padding: 5px;
}

.div3 {
 display: flex;
 padding: 10px;
 margin-left: 0px;
 align-items: center;
}

.div3 button {
 width: 40px;
 height: 30px;
 margin-left: 160px;
}

.bell {
 width: 30px;
 padding: 10px;
 flex-basis: 1000px;
}

<section class="wrapped">
 <div class="div1">
  <button>At campus</button>
  <img class="avatar" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&m=1300845620&s=612x612&w=0&h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" />
 </div>
 <div class="div2">
  <button>Q & A</button>
  <button>Klasser</button>
  <button>Grupper</button>
  <button>Chat</button>
 </div>
 <div class="div3">
  <img class="bell" src="https://www.iconpacks.net/icons/1/free-bell-icon-860-thumb.png"/>
  <button>Help</button>
 </div>
 
</section>

display:grid not working on a button element in chromium and nwjs, works fine in firefox

Apparently, because <button> tags cannot be implemented with pure CSS, only some CSS rules work on them on certain browsers, and most display: settings are among the CSS rules that do not work. Chromium was one of the browsers that this doesn't work on, until Chromium 83 which was released less then a month ago as of writing this, and Firefox was not. In fact, now that I've restarted my Chromium, my broken layout now works correctly. However, nwjs did not seem to be updated to chromium 83 when I started troubleshooting this. However, as of earlier this week, it should be fixed on nwjs too.

I actually fixed my code with a workaround before discovering that chromium and nwjs no longer need said workaround and I just had to update. Just in case you need to support an older version of Chromium than 83, the workaround is to have a span tag inside the button which you apply the grid layout to. Code:

<!DOCTYPE html>
<html>

<head>
    <title>problem fixed</title>
    <style>
        .outer-btn {
            background-color: lightgray;
            padding: 1em 0;
            border-radius: 1em;
            margin-bottom: 0.25em;
            border: transparent;
            width: 100%;
            border: 0;
        }

        .outer-layout {
            display: grid;
            grid-template-columns: 10em auto 10em;
            width: 100%;
            margin: 0;
            border: 0;
            padding: 0;
        }

        .inner {
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
    <button type='button' class='outer-btn'>
        <span class='outer-layout'>
            <div class='inner'>
                aaa
            </div>
            <div class='inner'>
                bbb
            </div>
            <div class='inner'>
                ccc
            </div>
        </span>
    </button>
</body>

</html>

Flex / Grid layouts not working on button or fieldset elements

The Problem

In some browsers the <button> element doesn't accept changes to its display value, beyond switching between block and inline-block. This means that a <button> element cannot be a flex or grid container, or a <table>, either.

In addition to <button> elements, you may find this constraint applying to <fieldset> and <legend> elements, as well.

See the bug reports below for more details.

Note: Although they cannot be flex containers, <button> elements can be flex items.

The Solution

There is a simple and easy cross-browser workaround to this problem:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

Adjusted CSS (targeted span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Revised Demo

References / Bug Reports

Flexbox on a <button> blockifies the contents but doesn't establish a flex formatting context

User (Oriol Brufau): The children of the <button> are blockified, as dictates the flexbox spec. However, the <button> seems to establish a block formatting context instead of a flex one.

User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS display value in Gecko [aside from whether it's inline-level vs. block-level]. <button> is one of these. <fieldset> & <legend> are as well.

Add support for display:flex/grid and columnset layout inside <button> elements

User (Daniel Holbert):

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that
they don't necessarily react in the same way that e.g. a <div>
would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put overflow:scroll on a button, and we don't render it as a
table if you put display:table on it.

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering
behavior.

And old-timey HTML elements like <button> and <table> and <fieldset> simply do not support custom display values, other than
for the purposes of answering the very high-level question of "is this
element block-level or inline-level", for flowing other content around
the element.

Also see:

Flexbug #9: Some HTML elements can't be flex containers
10. Some HTML elements can't be grid containers

Is a <Button> Allowed to Have Display:Grid