Stuck with styling dropdown in grid-CodePudding

New to css grid here. I'm trying to achieve this layout - https://imgur.com/a/PXDsLYx

I'm stuck at the dropdown menus. Not sure how to lay it out 2 columns 3 rows

Forgot to mention, I want to make it single column when I shrink browser, like when we're viewing it on phones. I'd like it to look like this - https://imgur.com/a/zmn3DZo

Here's my code - https://codepen.io/v1rt/pen/KKyPXNw

/* Typography imported from Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Playfair Display|Source Sans Pro:200,400');
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Playfair Display', serif;
}

p,
a {
  font-family: 'Source Sans Pro', sans-serif;
}


/* Generic styles */

html {
  scroll-behavior: smooth;
}

.top,
.bottom {
  /* Photo by mnm.all on Unsplash */
  background: url('https://images.unsplash.com/photo-1518176258769-f227c798150e') center;
  background-size: cover;
  padding: 4rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: center;
}

.midmenu {
  padding: 20px;
}

<main >
  <section ></section>
  <section >
    <SELECT name="s1">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
    <SELECT name="s2">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
    <SELECT name="s3">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
    <SELECT name="s4">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
    <SELECT name="s5">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
    <SELECT name="s6">
      <option value='blue'>Blue</option>
      <option value='green'>Green</option>
      <option value='red'>Red</option>
      <option value='yellow'>Yelllow</option>
      <option value='' selected>Select a Color </option>
      <option value='white'>White</option>
    </SELECT>
  </section>
  <section ></section>
</main>

CodePudding user response：

You can use grid by adding following property to your midmenu class-

.midmenu {
  padding: 20px;
  display:grid;
  grid-template-columns:auto auto;
}

CodePudding user response：

I guess you were only struggling with the dropdown menu-s part... if so, here you go. Try this out.

<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<main >
      <section ></section>
      <section >
        <div >
          <div >
        <SELECT name="s1">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
        <SELECT name="s2">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
        <SELECT name="s3">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
        </div>
          <div >
        <SELECT name="s4">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
        <SELECT name="s5">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
        <SELECT name="s6">
          <option value='blue'>Blue</option>
          <option value='green'>Green</option>
          <option value='red'>Red</option>
          <option value='yellow'>Yelllow</option>
          <option value='' selected>Select a Color </option>
          <option value='white'>White</option>
        </SELECT>
          </div>
        </div>
      </section>
      <section ></section>
    </main>