CODEWITHSUNDEEP
htmlcsscss-multicolumn-layout
launchoverit
launchoverit

Reputation: 5207

CSS columns with elements that expand

I would like to use css columns to arrange a list of items into three columns. When I click on certain items, I will use JS to expand them, and when that happens I don’t want the layout be adjusted to compensate. Is this possible?

$('.clickme').click(function(){
  $(this).toggleClass('big');
});
/* relevant CSS */
ul{
  display:block;
  max-width:640px;
  list-style:none;
  margin:0;
  padding:0;
}
.box1 ul{
  columns: 200px 3;
}
.box1 li{
  break-inside: avoid;
}
.box2 ul{
  width: 200px;
  float: left;
}
li{
  display:block;
  background-color:#555;
  color:white;
  border: 1px solid white;
  padding: 4px;
  min-height:1px;
}


/* less relevant CSS */
body{font-family: sans-serif;}
.clickme{
  transition: min-height .5s;
}
.clickme:hover{
  background-color:#999;
  cursor: pointer;
}
.clickme.big{
  min-height:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="box1">
<h3>I don't want this - when an element expands the other elements rearrange themselves.</h3>
<ul>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li class="clickme">click me</li>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li>item</li>
</ul>
</div>

<div class="box2">
<h3>This is what I want - when an element expands the other elements stay put. I'm using multiple lists for this though, and I'd like to use just one list if possible.</h3>
<ul>
	<li>item</li>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
</ul>
<ul>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li class="clickme">click me</li>
	<li>item</li>
</ul>
<ul>
	<li>item</li>
	<li>some of these items are longer than others</li>
	<li>item</li>
	<li>item</li>
</ul>
</div>

Here's the CSS I'm using for the columns: 

.box1 ul{
  columns: 200px 3;
}

Here's a codepen to illustrate - http://codepen.io/anon/pen/YNpJYG

Note: It’s obviously less ideal, but if it’s possible to have CSS columns create the columns based on the number of elements rather than their size, that could work for me.

Upvotes: 1

Views: 1605

Answers (1)

Nedim Kurbegović
Nedim Kurbegović

Reputation: 97

Unfortunately, CSS3 multi-column layout does not allow editing each column respectively and there is no way to manually edit their heights.

However, there are some properties that you can use to show the content of 'clickme' without disarranging other list elements. Use 'column-span' to span the element through all columns and 'column-gap' to remove the space between columns.

$('.clickme').click(function(){
  $(this).toggleClass('big');
});
/* relevant CSS */
ul{
  display:block;
  max-width:600px;
  list-style:none;
  margin:0;
  padding:0;
}
.box1 ul{
  -webkit-column-count: 3; 
  -moz-column-count: 3; 
  column-count: 3;
  -webkit-column-gap: 0px; 
  -moz-column-gap: 0px; 
  column-gap: 0px;
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
}
.box1 li{
  break-inside: avoid;
}

li{
  display:block;
  background-color:#555;
  color:white;
  border: 1px solid white;
  padding: 4px;
  height: 18px;
}


/* less relevant CSS */
body{font-family: sans-serif;}
.clickme{
  transition: height .5s;
  text-align: center;
  -webkit-column-span: all; 
  column-span: all;
}
.clickme:hover{
  background-color:#999;
  cursor: pointer;
}
.clickme.big{
  height:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<ul>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
	<li class="clickme">click me</li>
	<li>wut</li>
	<li>wut</li>
	<li>wut</li>
  <li>wut</li>
	<li>wut</li>
	<li>wut</li>
</ul>
</div>

Upvotes: 2

Related Questions