Why my div in display grid expand to cover all is available area?-CodePudding

I'm trying to insert 2 buttons inside 2 divs. All divs in my CSS have a display grid as assigned.

My question is why do the divs with class button-left and button-right expand to take all the space available, even if I did not tell them to have a width of 100% or width of 100vw?

To all other div I did specify to be 100vw but not this last one, so why do they keep expanding.

If I put display: block inside of them it works, but I don't understand why do I have to specify that in the first place?

Here is my code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  display: grid;
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div >
      <div ></div>
      <div >
        <div >
          <button  onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div >
          <button  onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div >
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

There seems to be an issue with Specificity.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

You essentially answered your own question. display: block; works because that is the default display for div's. You have div { display: grid;} which changes the default display: block; on all of your div's.

display: grid; will try to use all available space. Hence, why your buttons are stretched. I would either put the grid on only applicable div's. Or, you could use the :not pseudo-class like so:

div:not(.div-button-right, .div-button-left) {
  display: grid;
  border: dotted 1px #ff0;
}

This will exclude the div's defined in the :not pseudo-class of those styles.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  display: grid;
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  display: grid;
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  display: grid;
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div >
      <div ></div>
      <div >
        <div >
          <button  onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div >
          <button  onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div >
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>