How can i get vertical space between li tag using CSS-CodePudding

i would like to get vertical space in between each <li> tag in one of my list items. I tried it using CSS Grid, but then i getting equal vertical space and has unnecessay extra space eventhough there is one line of sentence. Hopes anyone can help me to get a solution. Following is the code. Thanks in advance!

html {font-family: Arial, Helvetica, sans-serif;}   
a {color:#555;text-decoration:none;}
.container {padding: 1.5rem;background-color: #cdcdcd;margin: 1rem;/* width: 50%; *//* border: 1px solid red; */}

@media only screen and (min-width:567px) {
.container {padding:3rem;background: #f9f9f9;}    
}

.list {
    background: #fff;
}
.list__ul {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2;
    border:1px solid red;
}
.list__item {
    display: flex;
    align-items: flex-start;
    break-inside: avoid-column;
}

.list__item:before {
    content: "";
    width: .10rem;
    height: .1rem;
    padding: 2px;
    background-color: transparent;
    border: solid #555;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin-right: .75rem;
    margin-top: .25rem;
}
.list__link {
    text-decoration: none;
    color: #666;
}

<div class="container">
    <div class="list">
        <ul class="list__ul">
            <li class="list__item"><a href="#" class="list1__link">One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens.</a></li>
            <li class="list__item"><a href="#" class="list1__link">Two Default value One Precise control In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens</a></li>
            <li class="list__item"><a href="#" class="list1__link">Three Sequential navigation </a></li>
            <li class="list__item"><a href="#" class="list1__link">Four Algorithm specification</a></li>
            <li class="list__item"><a href="#" class="list1__link">Five Dynamic Sources</a></li>
            <li class="list__item"><a href="#" class="list1__link">Six Auto Placement</a></li>
            <li class="list__item"><a href="#" class="list1__link">Seven Task Allocation</a></li>
            <li class="list__item"><a href="#" class="list1__link">Eight Implicit Contents</a></li>
            <li class="list__item"><a href="#" class="list1__link">Nine Absolute Specification</a></li>
        </ul>
    </div>
</div>

CodePudding user response：

add padding to li element, if you want to isolate it only to this ul list then use something like:

.list__ul li {
     padding-top: 20px;
}

To skip the first li element:

.list__ul li:nth-child(1n 2) {
     padding-top: 20px;
}

In order to also have vertical space use padding-right or padding-left or try to use padding inside class element list__item.

CodePudding user response：

You can simply add margin-bottom of your desired space in list__item class.e.g. I am using margin-bottom: 10px;. This will solve your problem.

.list__item {
    display: flex;
    align-items: flex-start;
    break-inside: avoid-column;
    margin-bottom: 10px;
}
.list__item:last-child {
                margin-bottom: 0px;
            }