I need to apply this line of CSS to my layout:
grid-template-columns: auto 1fr;
Is this something you can't do with Tailwind CSS?
You can extend the utilities using your Tailwind CSS config:
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'my-columns': 'auto 1fr'
}
}
}
};
<div class="grid grid-cols-my-columns">
</div>
Or you can use arbitrary values if you're only using this layout in one place:
<div class="grid grid-cols-[auto_1fr]">
</div>
There's more details in the documentation.
Related
My Layout looks like this
Layout Code:
const Layout = ({ children }: { children: ReactNode }) => {
return (
<div className="grid grid-cols-2 grid-rows-2">
<Head>
<title>Ystream</title>
</Head>
<nav className="row-span-2">Sidebar</nav>
<header>
<Navbar />
</header>
<main>{children}</main>
</div>
);
};
In this grid with 3 blocks, I have 2 columns and I want the width for the first column (Sidebar) to be min-content so that I have flexibility to set the width of the side bar the way I want.
To be precise, in CSS you'd do something like grid-template-columns: min-content 1fr.
How do replicate this in Tailwind?
This seemed to work for me:
grid-cols-[min-content_1fr]
which translates to
.grid-cols-\[min-content_1fr\] {
grid-template-columns: min-content 1fr;
}
Documentation Reference
I want to create an output like
Home / Library / Data
Here is my HTML
<div class="st-breadcrumb">
<div class="st-breadcrumb-default"></div>
<div class="st-breadcrumb-item">Home</div>
<div class="st-breadcrumb-item active">Library</div>
<div class="st-breadcrumb-item">Data</div>
</div>
Here is my css in tailwind css
.
st-breadcrumb-item ~ .st-breadcrumb-item:before {
content: '/';
margin: '10px';
}
Did I miss something or I need to have settings somewhere in config?
Try this,
HTML
<div>
<div className={"st-breadcrumb"}>
// "your default div deleted"
<div className={"st-breadcrumb-item"}>Home</div>
<div className={"st-breadcrumb-item active"}>Library</div>
<div className={"st-breadcrumb-item"}>Data</div>
</div>
</div>
CSS
.st-breadcrumb {
display: flex;
flex-direction: row;
}
.st-breadcrumb-item ~ .st-breadcrumb-item::before {
content: "/";
margin: 10px;
}
Tailwind v2.2+ has built-in support for siblings called peer but it works with pseudo-classes not pseudo-elements. Simplest solution will be this structure for Tailwind v2.2 (as it is has support for after) with mode: 'jit' enabled in your config.
<div class="flex">
<div class="after:content-['/'] after:mx-2.5">Home</div>
<div data-separator='/' class="after:content-[attr(data-separator)] after:mx-2.5">Library</div>
<div class="">Data</div>
</div>
// tailwind.config.js
module.export = {
mode: 'jit',
purge: {
content: [
// files to watch
],
},
}
DEMO: https://play.tailwindcss.com/bXQTNZtkMI
For older versions you can use plugins like tailwindcss-pseudo-elements which will add support for before and after. With this plugin you need to extend variants in your config and define content as tw-content-after="/"
<div class="flex">
<div tw-content-after="/" class="after:mx-2.5">Home</div>
<div tw-content-after="/" class="after:mx-2.5">Library</div>
<div class="">Data</div>
</div>
// tailwind.config.js
module.export = {
variants: {
extend: {
margin: ['after'],
},
},
plugins: [
require('tailwindcss-pseudo-elements'),
]
}
I have this html:
<div class="container h-screen w-screen">
<div class="navBar h-7"></div>
<div class="content-container"></div>
</div>
I have set the .navBar's height to h-7. Now I want to set .content-container's height to 100vh-(h-7).
How can I use calc() to set it?
If you are using v2.x, add mode: 'jit' to your tailwind.config.js (no mode: 'jit' needed in tailwind v3)
module.exports = {
mode: 'jit',
....
};
And use like this: (Without space!)
class="w-[calc(100%+2rem)]"
It will produce:
.w-\[calc\(100\%\+2rem\)\] {
width: calc(100% + 2rem);
}
We can use the theme variables as well:
h-[calc(100%-theme(space.24))]
Tailwind v3 update
Now we can use an underscore _ instead of whitespaces:
Ref: Handling whitespace
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-20 w-[calc(100%_-_10rem)] bg-yellow-200"></div>
theme()
Use the theme() function to access your Tailwind config values using dot notation.
This can be a useful alternative to #apply when you want to reference a value from your theme configuration for only part of a declaration:
.content-container {
height: calc(100vh - theme('spacing.7'));
}
I am creating a grid with tailwind and flexbox. Is it possible to create a 7 column grid? I know I can use width percentage but what would be the best practice here?
Actually the best solution would be to use CSS Grid instead Flexboxes to do this. Tailwind supports grid with up to 12 columns by default (docs).
<div class="grid grid-cols-7">
<div class="col-span-1">1</div>
<div class="col-span-3">2</div>
<div class="col-span-3">3</div>
</div>
If You really need to use flex:
By default there are classes w-1/2, w-1/3, w-1/12 etc but not w-1/7. We can set width for div manually in style="" or CSS, but the best practice would be to extend Tailwind configuration.
We need to add to tailwind.config.js new width classes (docs):
module.exports = {
theme: {
extend: {
width: {
+ '1/7': '14.2857143%',
+ '2/7': '28.5714286%',
+ '3/7': '42.8571429%',
+ '4/7': '57.1428571%',
+ '5/7': '71.4285714%',
+ '6/7': '85.7142857%',
}
}
}
}
Now we can use our x/7 columns:
<div class="flex">
<div class="w-1/7">1</div>
<div class="w-3/7">2</div>
<div class="w-3/7">3</div>
</div>
If You only want to get 7 columns with equal width, then we do not need to extend config and use width classes at all:
<div class="flex">
<div class="flex-1">1</div>
<!-- ... -->
<div class="flex-1">7</div>
</div>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have plenty of Angular mat-cards i.e. uncertain number of cards with images of different sizes.
What i am trying implement is a auto fill and adjustment of such cards depending on the container, something like this.
Now example above is using 4 columns and possible using grid.
Now, how do I implement that with cards? I tried using flex but somehow not able to properly implement it. Here's my worthless try.
<div class="mat-card-container" style="
display: flex;
justify-content: center; /* Add this */
flex-wrap: wrap;
">
<div class="mat-card-holder" style="
margin:0.6em;
width:220px;
" *ngFor="let art of arts.records">
<mat-card class="art-card" >
<mat-card-header>
<mat-card-title>{{ art.TITLE }}</mat-card-title>
<mat-card-subtitle>{{ art.AUTHOR }}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://localhost/piwigo/{{ art.URL }}" alt="Photo of a Shiba Inu">
<mat-card-content>
{{art.TECHNIQUE}} / {{art.SCHOOL}} / {{art.FORM}} / {{art.TYPE}} / {{art.LOCATION}}
</mat-card-content>
</mat-card>
</div>
</div>
This is giving me this much, but still there are alot of gaps to be covered.
This is only lining them up in columns, how to i dynamically fill and adjust these in container? Assuming if container size changes, cards should rearrange without changing their own css i.e. dimensions. Is my code correct uptill? And how do i fill the gap in between?
To the extend of my knowledge, this layout style you are looking to implement cannot be achieved by css in of itself.
With some help from a javascript helper library, this is easily implemented. As you are using Angular, this is an Angular wrapper to the previous library which will permit to do such a design.
Replying from my phone and can't really reproduce your exact ui, but copying verbatim here their example implementation,
App.module.ts
import { MasonryModule } from '#thisissoon/angular-masonry';
const masonryProviders = [
{ provide: Masonry, useFactory: () => window['Masonry'] },
];
#NgModule({
imports: [MasonryModule.forRoot(masonryProviders)],
})
export class AppModule {}
angular.json
"scripts": [
"../node_modules/masonry-layout/dist/masonry.pkgd.js"
],
app.component.ts
export class AppComponent implements AfterViewInit, OnDestroy {
#ViewChild('grid') public grid: ElementRef;
public masonryInstance: MasonryInstance;
public cards = cards;
constructor(#Inject(Masonry) public masonry) {}
ngAfterViewInit() {
const options: MasonryOptions = {
itemSelector: '.card',
columnWidth: '.card',
gutter: 20,
fitWidth: true,
};
this.masonryInstance = new this.masonry(this.grid.nativeElement, options);
}
layout() {
this.masonryInstance.layout();
}
ngOnDestroy() {
this.masonryInstance.destroy();
}
}
app.component.css
:host {
display: block;
margin-top: 1rem;
}
.grid {
margin: 0 auto;
}
.card {
display: inline-block;
margin-bottom: 1rem;
width: 18rem;
}
app.component.html
<div class="grid" #grid>
<div class="card" *ngFor="let card of cards">
<div class="card-body">
<h5 class="card-title">{{ card.title }}</h5>
<p class="card-text">{{ card.text }}</p>
Go somewhere
</div>
</div>
</div>