SUIT CSS: Arrange component tests
.Arrange
renders full width by default
.Arrange-sizeFit / .Arrange-sizeFill
shrinkwraps content of .Arrange-sizeFit
fills remaining space with content of .Arrange-sizeFill
renders equal-height columns
works with reverse source order
allows multiple instances of .Arrange-sizeFit in various orders
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
supports inter-cell gutters
.Arrange--middle
middle-aligns content
Main content.
.Arrange--bottom
bottom-aligns content
Main content.
.Arrange--equal
renders equal-width cells
renders equal-width cells when a gutter is included
renders equal-width cells when content width varies
Complex example
renders ok if you make very wide images full width in Arrange-sizeFill
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id massa dui. In quam sapien, vulputate ut ultrices eu, ultricies non felis. Donec nisi diam, accumsan viverra laoreet sed, ultricies ut lacus. Sed sed iaculis sapien. Phasellus nec massa elit. Nullam rutrum, sapien non semper fermentum, mauris libero eleifend diam, ac rhoncus risus metus sed magna. Duis venenatis, orci at fermentum pulvinar, est diam consequat eros, in tristique neque ligula commodo lorem. Pellentesque eleifend mollis tincidunt. Donec a porta nisl. Phasellus ultrices rutrum odio tincidunt tristique. In hac habitasse platea dictumst. Proin nec massa ultrices est fermentum pretium sed non elit. Aenean nec erat augue.