<style>
.content {
columns: 2; /* can be pixel , that's mean I just wanna 2 column */
width: 80%;
max-width: 750px;
margin: 0 auto;
}

</style>

# CSS Columns RWD

flex和grid可以很簡單的去設定RWD，以flex來舉例，我們只需要在width等於手機width的時候，去調整**flex-direction**就好。

但除了這兩個語法外，我們也可以利用**columns**來調整。

直接來看用columns調整的結果：

<div class="content">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, atque. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur deleniti alias maiores exercitationem sit perferendis. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum doloremque molestias amet sed ullam officiis perspiciatis illo dolor tenetur fugit? </p> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias veritatis tenetur cupiditate saepe, distinctio ex totam debitis deserunt minus velit quae recusandae, sit nostrum aliquam. </p>
</div>

<br/>

上面的效果是將**div**的columns設定成2，也就是2欄的意思，我們也可以設定px。

***style.css***

body {
  font-family: sans-serif;
  min-height: 100vh;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  columns: 2; /* can be pixel ,  that's mean I just wanna 2 column */
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

因為我對著HackMD設定media query沒有用，所以直接看CodeSandbox的效果~

<iframe src="https://codesandbox.io/embed/fast-shape-3tr9c?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="fast-shape-3tr9c"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

<br/>

現在把CodeSandbox縮小，你會發現文字變成一列一列的了!

這是因為我設定了media query，當width到達我設定的目標時，就將**div**的columns設定為1。

***style.css***

body {
  font-family: sans-serif;
  min-height: 100vh;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  columns: 2; /* can be pixel ,  that's mean I just wanna 2 column */
  width: 80%;
  max-width: 750px;
  margin: 0 auto;
}

@media (max-width: 40rem) {
  .content {
    columns: 1;
  }
}