0

I have a container with a few buttons and a select element. I want them all to be responsive squares, besides the last element, which is the select and takes on the full width. I already made them responsive squares, but how do I not make the last element a square? The last element should have the same height as the other elements, but I don't know how to solve that.

My Code

<div id="font-settings">
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select></div>
</div>

:root {
  /**
   * [Changeable Settings]
   * These are meant for updating the font and
   * background colour later in JavaScript.
   */
  --main-color: #415160;
  --secondary-color: #fbfbf8;
  --additional-color: #92928b;
  --font-size: 1rem;
  --line-height: 1.6rem;
  --letter-spacing: 0rem;
  --font-type: inherit;

  /* FIXED SETTINGS */
  /* [Colour Settings] */
  --ink-blue: #415160;
  --paper-white: #fbfbf8;
  --drk-paper-white: #efefe7;
  --brown-spot: #92928b;

  /* [Font Settings] */
  --xs-font-size: 0.6rem;
  --sm-font-size: 0.8rem;
  --reg-font-size: 1rem;

  /* [Grid Settings] */
  --grid-margin: 26px;
  --grid-gutters: 9px;
  --grid-column: 74px;
}

@mixin grid-margin {
  margin: {
    left: var(--grid-margin);
    right: var(--grid-margin);
  }
}

#font-settings {
  @include grid-margin;
  background-color: var(--ink-blue);
  padding: var(--reg-font-size);
  border-radius: var(--reg-font-size);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  .square {
    position: relative;
    flex: 1 1 20%;
    margin: var(--grid-gutters);

    &::before {
      content: "";
      display: block;
      padding-top: 100%;
    }

    & * {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      &:hover {
        box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.15);
      }
    }
  }
}

Here is a picture of what I want:
enter image description here
And here is a picture of what my code looks like right now:
enter image description here

The current code is for the mobile screen. Hence why it has to be responsive and cannot have fixed widths. And I don't know how to best achieve that.
If possible, I would prefer a CSS or SCSS solution. JavaScript would be my last resort.

Solutions I looked up

I already checked out this: CSS grid square layout
And this one: A grid layout with responsive squares
To help me make the squares.

Mähnenwolf
  • 720
  • 10
  • 30

1 Answers1

1

You need to filter the last-child and reset the vertical padding . codepen demo

possible fix to start from :

&:not(:last-child)::before {
  content: "";
  display: block;
  padding-top: 100%;
}
&:last-child::before {
  content: "";
  display: block;
  padding-top: 20%;/*here the values you want to reset */
}

if it is only about styling the padding, then

&::before {
  content: "";
  display: block;
  padding-top: 100%;
}
&:last-child::before { 
  padding-top: 20%;
}

is plenty enough

:root {
  /**
   * [Changeable Settings]
   * These are meant for updating the font and
   * background colour later in JavaScript.
   */
  --main-color: #415160;
  --secondary-color: #fbfbf8;
  --additional-color: #92928b;
  --font-size: 1rem;
  --line-height: 1.6rem;
  --letter-spacing: 0rem;
  --font-type: inherit;
  /* FIXED SETTINGS */
  /* [Colour Settings] */
  --ink-blue: #415160;
  --paper-white: #fbfbf8;
  --drk-paper-white: #efefe7;
  --brown-spot: #92928b;
  /* [Font Settings] */
  --xs-font-size: 0.6rem;
  --sm-font-size: 0.8rem;
  --reg-font-size: 1rem;
  /* [Grid Settings] */
  --grid-margin: 26px;
  --grid-gutters: 9px;
  --grid-column: 74px;
}

#font-settings {
  margin-left: var(--grid-margin);
  margin-right: var(--grid-margin);
  background-color: var(--ink-blue);
  padding: var(--reg-font-size);
  border-radius: var(--reg-font-size);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
#font-settings .square {
  position: relative;
  flex: 1 1 20%;
  margin: var(--grid-gutters);
}
#font-settings .square::before {
  content: "";
  display: block;
  padding-top: 100%;
}
#font-settings .square:last-child::before {
  padding-top: calc(25% - var(--grid-gutters) );
}
#font-settings .square * {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#font-settings .square *:hover {
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.15);
}
<div id="font-settings">
   <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><button>aaa</button></div>
  <div class="square"><select>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select></div>
</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This is to very close to what I want, so thank you a bunch for that already. But when I tried it, the numbers were not the same. If that is not possible with CSS, that shouldn't be a problem with this solution. as it's just a few pixel difference. (Also, your codepen seems to not work right.) – Mähnenwolf Dec 28 '20 at 15:13