Grid Template Rowsv1.2.0+
@include('_partials.class-table', [ 'scroll' => false, 'rows' => $page->config['theme']['gridTemplateRows']->map(function ($value, $name) { $class = ".grid-rows-{$name}"; $code = "grid-template-rows: {$value};"; return [$class, $code]; }) ])
Usage
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
@component('_partials.code-sample', ['class' => 'bg-white p-8'])
Responsive
To control the columns of a grid at a specific breakpoint, add a {screen}: prefix to any existing grid-template-columns utility. For example, use md:grid-cols-6 to apply the grid-cols-6 utility at only medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
@component('_partials.responsive-code-sample', ['class' => 'bg-white p-8']) @slot('none')
Customizing
By default Tailwind includes grid-template-row utilities for creating basic grids with up to 6 equal width rows. You change, add, or remove these by customizing the gridTemplateRows section of your Tailwind theme config.
You have direct access to the grid-template-rows CSS property here so you can make your custom rows values as generic or as complicated and site-specific as you like.
@component('_partials.customized-config', ['key' => 'theme.extend.gridTemplateRows']) // Simple 8 row grid
'8': 'repeat(8, minmax(0, 1fr))',
// Complex site-specific row configuration
'layout': '200px minmax(900px, 1fr) 100px', @endcomponent
Learn more about customizing the default theme in the theme customization documentation.
@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'grid-template-rows', 'property' => 'gridTemplateRows', ], 'variants' => ['responsive'], ])
