Resize columns to size of their children

I want to resize column 1 to the same width as the children inside. See visual example: https://imgur.com/a/PEeyZZf

How can i do it?

I have this and i can't see the change yet

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      media: {
        'md': '@media (min-width: 768px)',
      },
      gridTemplateColumns: {
        'homegrid': '1fr 2fr',
      }
    },
  },
  plugins: [],
}

    <div class="container mx-auto py-6 gap-3 grid md:grid-cols-homegrid lg:grid-cols-4">
        {{ $slot }}
    </div> <!-- main container end -->

This is where the custom style gets applied, and it should happen at the md breakpoint, on the component im just simply re-organizing the columns to start at a different location

<x-app-layout>
    <div class="md:col-start-2 lg:col-end-4">
        <article class="relative">
            <a href="{{ route('view', $latestPost) }}">
                <img src="{{ $latestPost->getThumbnail() }}" alt="">
                <div class="absolute bottom-0 left-0 right-0 px-4 py-2 bg-gradient-to-t from-black">
                    <h1 class="font-bold">LATEST NEWS</h1>    
                    <h3 class="text-xl text-white font-bold">
                        {{ $latestPost->title }}
                    </h3>
                    <p class="mt-2 text-sm text-gray-300">
                        {{ $latestPost->shortBody() }}
                    </p>
                </div> <!-- latest news end -->
            </a>
        </article>  
    </div> <!-- latest articles end -->

tisuchi

2 years ago

Level 70

@warpig Can you try this?

Update your tailwind.config.js file to add a custom class for the md breakpoint:

export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      media: {
        'md': '@media (min-width: 768px)',
      },
      gridTemplateColumns: {
        'homegrid': '1fr 2fr',
      },
      minWidth: {
        'md:col-1': 'auto',
      }
    },
  },
  plugins: [],
}

Update your html code now:

<div class="container mx-auto py-6 gap-3 grid md:grid-cols-homegrid lg:grid-cols-4">
    <div class="md:col-start-1 md:col-1">
        <x-app-layout>
            <div class="md:col-start-2 lg:col-end-4">
                <!-- Your content here -->
            </div>
        </x-app-layout>
    </div>
</div>

warpig

2 years ago

Level 12

@tisuchi turns everything into 1 column, regardless of the screen size. i switched the use of md-col-start-1 md:col-1 to the actual div to the contents of the column i want smaller but it just stays the same!

This is the column that needs to be smaller

    <div class="md:col-start-1 md:col-1 md:row-start-1">
        <h1 class="font-bold">LATEST NEWS</h1>
        @foreach ($posts as $post)
            <x-post-item :post="$post"></x-post-item>
        @endforeach
    </div> <!-- trending news end -->

Please or to participate in this conversation.