All geek questions in one place

CSS grid vertical columns with infinite rows

I have a list of objects of unknown length (from CMS). I want to show them in two vertical columns reading down. eg.

14
2 5
3 6

etc ...

I am trying to achieve this with a CSS grid, however this seems impossible unless you set the number of rows up. I tried grid-auto-flow: columnaccording to https://gridbyexample.com/examples/example18/ , but this adds extra columns when it comes to the end.

It seems to me that this is possible with a grid, but I can not find a way. Does anyone have any ideas?

PS Please do not offer CSS text columns.

+4
source share
2

, CSS-.

- .

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  
  /* extra styles */
  grid-gap: 0.5rem;
}

span {
  grid-column-start: 1;
  
  /* extra styles */
  background-color: #def;
  padding: 0.5rem;
}

.second-half {
  grid-column-start: 2;
  
  /* extra styles */
  background-color: #abc;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>
+4

flex, . , : -

<body>
<div class="container">
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</div>
</body>

CSS

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

flexbox

+2

Source: https://habr.com/ru/post/1680720/

More articles:


All Articles