PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE
Question By

Dev Dojo

Solved
Back to All Questions

A bit stuck on a probably easy grid question

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