Столбцы CSS с элементами, которые расширяются

Question

Я хотел бы использовать столбцы css, чтобы упорядочить список элементов на три столбца. Когда я нажимаю на определенные элементы, я буду использовать JS для их расширения, и когда это произойдет, я не хочу, чтобы макет был скорректирован для компенсации. Это возможно?

$('.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> 
 
\t <li>item</li> 
 
\t <li>item</li> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
\t <li class="clickme">click me</li> 
 
\t <li>item</li> 
 
\t <li>item</li> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
\t <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> 
 
\t <li>item</li> 
 
\t <li>item</li> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
</ul> 
 
<ul> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
\t <li class="clickme">click me</li> 
 
\t <li>item</li> 
 
</ul> 
 
<ul> 
 
\t <li>item</li> 
 
\t <li>some of these items are longer than others</li> 
 
\t <li>item</li> 
 
\t <li>item</li> 
 
</ul> 
 
</div>

Вот CSS я использую для столбцов:

.box1 ul{ 
    columns: 200px 3; 
} 

Вот codepen для иллюстрации - http://codepen.io/anon/pen/YNpJYG

Примечание: Это, очевидно, менее идеально, но если возможно, чтобы столбцы CSS создавали столбцы на основе количества элементов, а не их размер, который мог бы работать для меня.

Answer 1

К сожалению, многоконтактный макет CSS3 не позволяет редактировать каждый столбец соответственно, и нет возможности вручную отредактировать их высоты.

Однако есть некоторые свойства, которые вы можете использовать для показа содержимого «clickme», не нарушая других элементов списка. Используйте «span-span» для охвата элемента через все столбцы и «столбец-пробел», чтобы удалить пространство между столбцами.

$('.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> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li class="clickme">click me</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
    <li>wut</li> 
 
\t <li>wut</li> 
 
\t <li>wut</li> 
 
</ul> 
 
</div>