卡在网格中的样式下拉列表中

Question

这里是 css 网格的新手。我正在尝试实现这种布局 - https://imgur.com/a/PXDsLYx

我卡在下拉菜单上了。不确定如何布局 2 列 3 行

忘了说，我想在缩小浏览器时将其设为单列，就像我们在手机上查看时一样。我希望它看起来像这样 - https://imgur.com/a/zmn3DZo

这是我的代码 - 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 class="wrapper">
  <section class="top"></section>
  <section class="midmenu">
    <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 class="bottom"></section>
</main>

Answer 1

您可以通过将以下属性添加到您的 midmenu class-

来使用网格

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

卡在网格中的样式下拉列表中

Stuck with styling dropdown in grid

css

flexbox

css-grid