Note: you can inspect the code for the preview below.
<div class="flow-root p-40">
<!-- to prevent unintented spacings -->
<div class="flex flex-wrap -m-16">
<!-- remove the excess spacing from child items -->
<div class="w-4/12 p-16">
<!-- vertical and horizontal spacing between items -->
<div class="...">1</div>
</div>
<!-- ... -->
</div>
</div>
Usually, you need to change the gutter (space between items) depending on the screen width.
You might also need to have different vertical and horizontal gutters.
<div class="flow-root px-20 lg:px-40">
<div class="flex flex-wrap -mx-8 lg:-mx-16 -my-4 lg:-my-8">
<div class="w-6/12 lg:w-4/12 px-8 lg:px-16 py-4 lg:py-8">
<div class="...">1</div>
</div>
<!-- ... -->
</div>
</div>
.container
and .row
componentsYou're most likely repeating this part for a lot of sections on the website.
<div className="flow-root px-20 lg:px-40">
<div className="flex flex-wrap -mx-8 lg:-mx-16 -my-4 lg:-my-8">
<!-- ... -->
</div>
</div>
Which is why you might want to turn it into a component.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.container {
@apply flow-root px-20 lg:px-40;
}
.row {
@apply flex flex-wrap -mx-8 lg:-mx-16 -my-4 lg:-my-8;
}
}
Note: you would need to either disable the default .container
class or
change your component name so they don't conflict with one another.
module.exports = {
corePlugins: {
// ...
+ container: false,
}
}
.container
and .row
components on steroidsFor some projects, I found myself:
For that, I created
tailwindcss-flex-grid. A
plugin that easily creates multiple .container
and .row
classes with all the
utilities you need to pull all sorts of flex grid layouts.
You can install via yarn
yarn add tailwindcss-flex-grid
Then configure the plugin
module.exports = {
theme: {
// ...
flexGrid: {
containers: {
DEFAULT: {
padding: {
DEFAULT: `1.25rem`,
lg: `10vw`,
xl: `15vw`,
'2xl': `20vw`,
'3xl': `24vw`,
'4xl': `28vw`,
},
},
},
rows: {
DEFAULT: {
gutterX: {
DEFAULT: `1rem`,
lg: `2rem`,
},
gutterY: {
DEFAULT: `1rem`,
lg: `2rem`,
},
},
},
},
},
plugins: [
require('tailwindcss-flex-grid'),
// ...
],
}
This will generate some classes such as .-mr-container
that will come in handy
later.
<div class="container">
<div class="row items-center">
<div class="w-7/12 -mr-2/12 relative">
<div class="...">1</div>
</div>
<div class="w-7/12">
<div class="...">2</div>
</div>
</div>
</div>
Note: for this to work, your container should have no max-width
, only left
and right padding.
<div class="container">
<div class="row">
<div class="w-6/12 lg:w-4/12">
<div class="-ml-container">
<div class="...">1</div>
</div>
</div>
<!-- ... -->
<div class="w-6/12 lg:w-4/12">
<div class="-mr-container">
<div class="...">6</div>
</div>
</div>
</div>
</div>