CSS grid not constraining number of columns

user_12217099 0
Viewed 443

I'm trying to get my grid to only put 3 buttons per row, so that when I add a 4th, it should automatically be placed in the next row.

This is my code:

.div {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #3c763d;
}

.button {
  background: #27ae60;
  float: left;
  margin: 6px 6px 6px 6px;
  height: 2rem;
  width: 8.33%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
  color: #f9f9f9;
  text-align: center;
  justify-content: center;
  padding-top: 12px;
}

.button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Rock, Paper, Scissors!</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div>
  <div class="button">Rock</div>
  <div class="button">Paper</div>
  <div class="button">Scissors</div>
  <div class="button">Clear</div>
</div>

</html>

Instead, I keep getting left with a row of 4 buttons, instead of a row of 3, followed by a new row of 1. What am I misunderstanding here?

css html
3 Answers

You were close, but there are a few things you need to fix to get this to work.

1. Your grid CSS rules are in a class div that you don't use:
Your CSS rules for the grid are in .div {...} Either you meant that to be a <div> element (which won't work FYI - it would make every div a grid container!) or forgot to add the div class to the grid element in your HTML.

Instead, add a class to your outer div e.g. <div class="mygrid"> and add the grid css rules to that class, e.g.

.mygrid {
    display: grid;
    grid-template-columns: auto auto auto;
    background: #3c763d;
    /* Extra info! You can use this for even grid gaps */
    grid-gap: 6px;
    padding: 6px;
}

2. You are giving your buttons width 8.33% - this will make your button 8.55% of the grid columns, which I assume you don't want :).

3. You can also remove the display:float from the buttons, as this will be managed automatically by the grid

4. You can use grid-gap to create even gaps between the grid elements instead of setting margins on them - this makes the gaps between the rows and cols the same because there i no margin-collapsing.
(You can use the same size padding on the container to pad the space evenly.)

Working Example:

.mygrid {
    display: grid;
    grid-template-columns: auto auto auto;
    background: #3c763d;
    grid-gap: 6px;
    padding: 6px;
}

.button {
    background: #27ae60;
    height: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
    color: #f9f9f9;
    text-align: center;
    justify-content: center;
    padding-top: 12px;
}

.button:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div class="mygrid">
    <div class="button">Rock</div>
    <div class="button">Paper</div>
    <div class="button">Scissors</div>
    <div class="button">Clear</div>
</div>

user_5148780

#1 using grid Method

width:8.33%;float:left not need for button also add a class to main div in grid i add as maindiv and styled for it instead style direct div affect all

.maindiv {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #3c763d;
}


.maindiv {
  display: grid;
  grid-template-columns: auto auto auto;
  background: #3c763d;
}

.button {
  background: #27ae60;
  margin: 6px 6px 6px 6px;
  height: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
  color: #f9f9f9;
  text-align: center;
  justify-content: center;
  padding-top: 12px;
}

.button:hover {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
  <title>Rock, Paper, Scissors!</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="index.css">
</head>

<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div class="maindiv">
  <div class="button">Rock</div>
  <div class="button">Paper</div>
  <div class="button">Scissors</div>
  <div class="button">Clear</div>
</div>

</html>

#2 Using flex method

.maindiv {
    display: flex;
    flex-wrap:wrap;
    background: #3c763d;
}

.button {
    background: #27ae60;
    margin: 6px 6px 6px 6px;
    height: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.34);
    color: #f9f9f9;
    text-align: center;
    justify-content: center;
    padding-top: 12px;
    max-width: calc(33.33% - 12px );
    flex-basis: calc(33.33% - 12px );
}
.button:hover {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
    <title>Rock, Paper, Scissors!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<h1>Rock Paper Scissors</h1>
<h3>Make your selection!</h3>

<div class="maindiv">
    <div class="button">Rock</div>
    <div class="button">Paper</div>
    <div class="button">Scissors</div>
    <div class="button">Clear</div>
</div>

</html>

user_133686580

To this make sure to give the wrapping div a class.

So your HTML will be.

<div class="button-wrapper">
    <div class="button">Rock</div>
    <div class="button">Paper</div>
    <div class="button">Scissors</div>
    <div class="button">Clear</div>
</div>

Then your grid will have only 3 items as you want.

You may want to fix this width of each item by removing the fixed width you have so the buttons can fill up space in the gird. remove it from class .button and you should be good to go.

.button{
      width: 8.33%;
}
user_92839580
Related