I am currently working on a project that places a list of items in two columns on a wide, desktop screen such as in the image below:
The first challenge I faced in creating this layout was to have some simple for the client. Since projects change frequently, I did not want the client to be forced to keep rearranging the columns. Fortunately, CSS Columns could help here.
1 2 3 4 5 6 | -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; |
The above code divided the text into columns but not always the way I wanted. This was the result in FireFox:
Since I always wanted the columns to break on a full paragraph and not some random spot in the middle, the following CSS when applied to the p tag solved the problem:
1 2 3 | -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; |
The last challenge in this layout was to always have the green borders in the correct place. Using “border-top” easily styled the top border and border-bottom on the “last-child” took care of the last item in the list. So, the remaining problem was how to always put a bottom border on the last item in column one?
It turns out, that you can use a combination of nth-child and nth-last-child to accomplish this. I found this reference from Lee Verou and realized I could use it to add a bottom border and complete the styling. Here is a snippet of some of the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .client-text-container .gdlr-core-text-box-item-content p:nth-child(2):nth-last-child(3), .client-text-container .gdlr-core-text-box-item-content p:nth-child(2):nth-last-child(2), .client-text-container .gdlr-core-text-box-item-content p:nth-child(3):nth-last-child(3), .client-text-container .gdlr-core-text-box-item-content p:nth-child(3):nth-last-child(4), .client-text-container .gdlr-core-text-box-item-content p:nth-child(4):nth-last-child(4), .client-text-container .gdlr-core-text-box-item-content p:nth-child(4):nth-last-child(5), .client-text-container .gdlr-core-text-box-item-content p:nth-child(5):nth-last-child(5), .client-text-container .gdlr-core-text-box-item-content p:nth-child(5):nth-last-child(6), .client-text-container .gdlr-core-text-box-item-content p:nth-child(6):nth-last-child(6), .client-text-container .gdlr-core-text-box-item-content p:nth-child(6):nth-last-child(7), .client-text-container .gdlr-core-text-box-item-content p:nth-child(8):nth-last-child(8), .client-text-container .gdlr-core-text-box-item-content p:nth-child(8):nth-last-child(9), .client-text-container .gdlr-core-text-box-item-content p:nth-child(9):nth-last-child(9), .client-text-container .gdlr-core-text-box-item-content p:nth-child(9):nth-last-child(10) |
This CSS works by selecting the nth-child that is also the nth-child from the last item. So, in the example from the first screen shot with 3 items, the second item is nth-child(2) and is also second child from the end or nth-last-child(2). CSS Columns breaks the columns so that when there is an odd number of entries, the longer list is in the first column.
-0 Comments