Menu
I need to order my items from top-to-bottom, then left-to-right, e.g.:
1 5
2 6
3 7
4 8
However, box shadow is being cutoff. Reference the snippet: item 3's box shadow is cut off at bottom and item 4 is cut off at the top (in chrome).
There are similar questions to this, however the answers don't apply in this situation. I can't use flex on the container with flex-direction: column as this requires an explicit height and my item count is dynamic. I also can't set the items to display: inline-block as other answers suggest, since I need to control this content with flex.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>Two other things I've tried from other similar SO questions that did not work: setting overflow: visible, adding a wrapper around the items with transparent border. Thanks for any suggestions.
398
The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box. The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
<blur-radius> This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
To set a box-shadow on one side of the element, use the box-shadow property. This property has four length parameters and a color. box-shadow: h-offset v-offset blur spread color; h-offset sets the shadow horizontally.
The column-count property specifies the number of columns an element should be divided into.
Add display: inline-flex and width: 100% properties. break-inside: avoid-column property is invalid.
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
margin-top: -2px;
margin-bottom: -14px;
}
.item {
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
border-radius: 3px;
margin-top: 2px;
margin-bottom: 14px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>An idea is to use a pseudo-element where you apply the box-shadow. Make sure the pseudo element doesn't span all the space so it won't get affected by the cutting (use top and bottom different from 0)
.container {
column-count: 2;
column-gap: 16px;
width: 500px;
}
.item {
border-radius: 3px;
margin-bottom: 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
break-inside: avoid-column;
position:relative;
z-index:0;
}
.item:before {
content:"";
position:absolute;
z-index:-1;
top:1px;
bottom:3px;
left:0;
right:0;
box-shadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
