Я пытаюсь создать макет, который имеет div, охватывающий 3 столбца и 2 строки и div, охватывающий 1 столбец и 1 строку в tailwindcss

Question

Я новичок в попутном ветре, но мне это очень нравится. Я построил представление (в laravel), которое в основном делает следующее.

Я использовал сетку с 2 рядами по 4 столбца. У меня есть большая область (зеленое поле), что связано с тем, что выглядит как фиксированная высота строк. Вот мой код

<div class="my-5 items-center">
        <img height="150px" width="150px" class="mx-auto" src="{{asset('/images/CamCar-light-full-color-closer.svg')}}" alt="CamCar Logo Large">
    </div>
    <div class="text-center">
        <span class="text-6xl text-indigo-300 font-bold">CamCar IT Forum</span>
    </div>
    <div class="text-indigo-800 mx-3 my-5 px-4 py-3 min-w-3/4 bg-indigo-300 border border-4 border-indigo-700 rounded-lg">
        <div class="grid grid-cols-1 grid-rows-2 sm:grid-cols-4 sm:grid-flow-col sm:gap-4">
            <div class="col-span-1 sm:col-span-3 row-span-2">
                <div>
                    <p class="font-boldtext-xs text-indigo-900 md:text-sm">Latest Post</p>
                    <p class="text-xs md:text-sm">{{$post->title}}</p>
                </div>
                <div>
                    <p class="m-2 text-xs italic text-indigo-700">Category:- <span class="text-xs">{{$post->category->name}}</span></p>
                    <p class="ml-2 mr-1 my-1 px-2 py-1 border border-gray-500 rounded-md bg-gray-400 text-xs md:text-sm">{{$post->body}}</p>

                </div>

                @if($post->comments->count() >0)
                    <div class="ml-2 md:ml-6">
                        <span class="m-2 text-xs md:text-sm italic text-indigo-700">Comments</span>
                        @foreach($post->comments as $comment)
                            <div class="text-indigo-300 m-1 mb-2 p-2 px-2 py-1 border border-gray-400 rounded-md bg-gray-700 text-xs md:text-sm">
                                <p >{{$comment->comment}}</p>
                                <hr class="mx-1 my-1 border-indigo-200">
                                <p class="text-indigo-200 italic">from <span class="font-bold">
                                        <a href="{{route('home', $comment->user->id)}}">{{$comment->user->name}}</a></span> - {{$comment->time_ago}}</p>
                            </div>

                        @endforeach
                    </div>

                @endif
            </div>
            <div class="col-span-1 row-span-1 w-2/3 mx-auto grid-flow-col  sm:mx-0 sm:w-full mb-4">
                <div class="border border-gray-700 rounded-md p-2 text-sm">
                    <img class="mx-auto" width="50px" height="50px" src="{{$post->user->gravatar}}"  alt="Gravatar Icon"
                        title="Get your own gravatar at https://en.gravatar.com/">
                    <hr class="mx-2 mx-auto bg-gray-600 border-gray-600 my-2">
                    <p class="font-bold text-xs">Author</p>
                    <p class="text-xs ">{{$post->user->name}}</p>
                    <hr class="text-xs mx-2 mx-auto bg-gray-600 border-gray-600 my-2">
                    <p class="font-bold text-xs ">Created</p>
                    <p class="text-xs ">{{$post->time_ago}}</p>
                    <hr class="mx-2 mx-auto bg-gray-600 border-gray-600 my-2">
                    <p class="text-xs ">Comments:- {{($post->comments->count())}}</p>
                    <hr class="mx-2 mx-auto bg-gray-600 border-gray-600 my-2">
                    <p class="text-xs ">Total Posts:- {{$post->user->posts->count()}}</p>
                </div>

            </div>

        </div>
        <div class="flex justify-end">
            <a href="{{route('posts.show', $post->id)}}" class="text-sm inline-block text-indigo-800 border border-indigo-800 rounded
                                    px-4 py-1 font-bold hover:bg-indigo-800 hover:border-indigo-800 hover:text-indigo-300">
                View
            </a>
        </div>
    </div>

Могу ли я изменить высоту 2-го (нижнего) ряда, чтобы не было большого промежутка между этим и следующим делением, отсутствующим в сетке (деление 3)? В основном я ищу это.

Может быть, я не должен использовать сетку? Как я уже говорил, я новичок в попутном ветре css. Любая помощь приветствуется.