Aligning grid items with grid-template-columns

Question

I'm developing a web page and I'm trying to add some CSS Grid, but it's getting a bit difficult.

I just want to put the table on the left (85%) and the buttons on the right (15%).

#div-radio {
  font-size: 18pt;
  display: flex;
  margin-top: 1.2%;
  margin-left: 2%;
  width: 46%;
  display: grid;
  grid-template-columns: 86% auto;
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  width: 160%;
}

#arrows {
  display: flex;
  float: right;
}

<div id="div-radio" class="radio-item">
  <table class="table">
    <thead>
      <tr id="tr-principal">
        <th>ORDEN</th>
        <th>SECUENCIA</th>
        <th>ARTÍCULO</th>
        <th>DES. ARTÍCULO</th>
        <th>CANTIDAD</th>
        <th>CAN. FABRICADA OF</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="orden"> </td>
        <td class="secuencia"></td>
        <td class="articulo"></td>
        <td class="des_articulo"></td>
        <td class="cantidad"></td>
        <td class="can_fabricada_of"></td>
      </tr>
    </tbody>
  </table>

  <div id="arrows" align="right">
    <button>
        <img src="images/arrow_left.png" />
    </button>
    <button>
        <img src="images/arrow_right.png" />
    </button>
  </div>
</div>

Thank you in advise.

Don't you get this behaviour if you remove the `width: 160%` declared on your `table` element? The table will occupy the column width you've specified in the rule `grid-template-columns`. — UncaughtTypeError, Nov 21 '17 at 12:05

score 2 · Answer 1 · answered Nov 21 '17 at 12:14

You have a lot of issues with this.

You have 2 display properties on your container
You're missing the id selectors in your css (#)
You're mixing in floats
You're mixing widths that don't belong

#div-radio {
  /* ^^ WAS MISSING ID SELECTOR '#' */
  font-size: 18pt;
  /* display: flex; // DELETE THIS */
  /* width: 46%; // DELETE THIS */
  display: grid;
  background: #dddddd;
  grid-template-columns: 85% auto;
  font-size: 8pt;

  border-top: 10px;
  text-align: center;
  /* width: 160%; // DELETE THIS */
}

table {
  font-size: 10pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  width: 160%;
}

#arrows {
  /* ^^ WAS MISSING ID SELECTOR '#' */
  background: #cccccc;
  /* display: flex;; DELETE THIS */
  /* float: right; DELETE THIS */
}

<div id="div-radio" class="radio-item">
    <table class="table">
        <thead>
            <tr id="tr-principal">
                <th>ORDEN</th>
                <th>SECUENCIA</th>
                <th>ARTÍCULO</th>
                <th>DES. ARTÍCULO</th>
                <th>CANTIDAD</th>
                <th>CAN. FABRICADA OF</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="orden"> </td>
                <td class="secuencia"></td>
                <td class="articulo"></td>
                <td class="des_articulo"></td>
                <td class="cantidad"></td>
                <td class="can_fabricada_of"></td>
            </tr>
        </tbody>
    </table>
    <div id="arrows" align="right">
        <button>
            <img src="images/arrow_left.png" />
        </button>
        <button>
            <img src="images/arrow_right.png" />
        </button>
    </div>

Michael Benjamin · Answer 2 · 2017-11-21T12:14:31.480

#div-radio {
  font-size: 18pt;
  /* display: flex;               <-- remove */
  margin-top: 1.2%;
  margin-left: 2%;
  /* width: 46%;                  <-- remove */
  display: grid;
  grid-template-columns: 85% 1fr; /* adjusted */
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
  /* width: 160%;                  <-- remove */
}

#arrows { }

<div id="div-radio" class="radio-item">
  <table class="table">
    <thead>
      <tr id="tr-principal">
        <th>ORDEN</th>
        <th>SECUENCIA</th>
        <th>ARTÍCULO</th>
        <th>DES. ARTÍCULO</th>
        <th>CANTIDAD</th>
        <th>CAN. FABRICADA OF</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="orden"> </td>
        <td class="secuencia"></td>
        <td class="articulo"></td>
        <td class="des_articulo"></td>
        <td class="cantidad"></td>
        <td class="can_fabricada_of"></td>
      </tr>
    </tbody>
  </table>

  <div id="arrows" align="right">
    <button>
        <img src="images/arrow_left.png" />
    </button>
    <button>
        <img src="images/arrow_right.png" />
    </button>
  </div>
</div>

Also, keep this in mind when using percentage margins in Grid (and Flex) Layout:

Percentage padding / margin on grid item ignored in Firefox

score 1 · Answer 3 · answered Nov 21 '17 at 12:13

Try this, give name to the columns for playing with it on the media queries if you need it.

CSS

#div-radio {
  font-size: 18pt;
  margin-top: 1.2%;
  margin-left: 2%;
  display: grid;
  grid-template-columns: 86% 1fr;
  grid-template-areas: "left-col right-col";
}

.left-col {
  grid-area: left-col;
}

.right-col {
  grid-area: right-col;
}

table {
  font-size: 15pt;
  margin-left: 2%;
  margin-right: 2%;
  border-top: 10px;
  text-align: center;
}

#arrows {
  display: block
}

HTML

<div id="div-radio" class="radio-item">
  <div class="left-col">


    <table class="table">
      <thead>
        <tr id="tr-principal">
          <th>ORDEN</th>
          <th>SECUENCIA</th>
          <th>ARTÍCULO</th>
          <th>DES. ARTÍCULO</th>
          <th>CANTIDAD</th>
          <th>CAN. FABRICADA OF</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="orden"> </td>
          <td class="secuencia"></td>
          <td class="articulo"></td>
          <td class="des_articulo"></td>
          <td class="cantidad"></td>
          <td class="can_fabricada_of"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="right-col">

    <div id="arrows" align="right">
      <button>
        <img src="images/arrow_left.png" />
      </button>
      <button>
        <img src="images/arrow_right.png" />
      </button>
    </div>
  </div>
</div>

DEMO HERE

Aligning grid items with grid-template-columns

3 Answers3