A bit stuck on a probably easy grid question

Dev Dojo Visit User Profile
Solved
matthew-hutchings-1 ・

Dec 11th, 2018 04:43 PM

・

Best Answer

Would something like this be helpful:

<div class="uk-width-1-4">
    <div class="uk-card uk-card-default uk-card-body">1-4</div>
</div>
<div class="uk-width-1-4">
    <div class="uk-card uk-card-default uk-card-body">1-4</div>
</div>
<div class="uk-width-1-4">
    <div class="uk-card uk-card-default uk-card-body">1-4</div>
</div>    
	<div class="uk-width-1-4">
    <div class="uk-card uk-card-default uk-card-body">1-4</div>
</div>
Report
DigitalOcean Laravel News Genesis
bobbyiliev ・

Jun 1st, 2022 12:36 AM

Just adding a Tailwind CSS example here too:

Code block:

<div class="grid grid-cols-3 gap-4 text-white text-sm text-center font-bold leading-6">
    <div class="p-4 rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">01</div>
    <div class="p-4 rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">02</div>
    <div class="p-4 rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">03</div>
    <div class="p-4 rounded-lg shadow-lg bg-indigo-500 col-span-2">04</div>
    <div class="p-4 rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">05</div>
    <div class="p-4 rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">06</div>
    <div class="p-4 rounded-lg shadow-lg bg-indigo-500 col-span-2">07</div>
</div>
Report