I am trying to implement a grid in css which contains two rows, first row has 3 columns which each columns contain one of the li elements, and the second row contains the fourth li element from the unordered list. I am required to not modify the html code. Ps. this is for learning purpose so any help is greatly appreciated.
.unordered_list {
display: grid;
}<ul class="unordered_list"><li><img src="logo.png" alt="car"><p>It should be column of 3</p></li><li><img src="logo.png" alt="car"><p>It should be column of 3</p></li><li><img src="logo.png" alt="car"><p>It should be column of 3</p></li><li><h2>Head H2 Text</h2><p>Should be a row</p></li></ul>