![[Product Info#^embed]]
# Eisenhower Matrix - Kanban Style
I was intrigued by [Nick Milo's mention of the Eisenhower Matrix](https://twitter.com/NickMilo/status/1762205873097912645) in Obsidian, and it piqued my interest in a drag-and-drop [Eisenhower Matrix](https://jamesclear.com/eisenhower-box) experience in Obsidian.
If you are unfamiliar with the Eisenhower Matrix concept, check out my article [Eisenhower Matrix Kanban Style](https://tfthacker.substack.com/p/eisenhower-matrix-kanban-style).
## The experiment
So, I started to experiment with the following results:
![[Eisenhower Matrix in Obsidian.gif]]
As you can see, we have four quadrants, each with a color indicating urgency, importance, and so on.
#### To use this solution
1. Install the [Kanban plugin](https://obsidian.md/plugins?id=obsidian-kanban) for Obsidian. This plugin gives us the drag-and-drop functionality between quadrants.
2. Add the [CSS Snippet](https://help.obsidian.md/Extending+Obsidian/CSS+snippets) to your vault at this page's end.
1. The name of the CSS Snippet isn't important, but make sure in the Appearances tab of the Settings screen to toggle on the snippet.
3. Create a Kanban board
1. Add four columns (not more than four and not less than four).
2. Rename the file to be whatever you want it to be, but include the phrase **e-matrix**.
3. This last step is important since the CSS Snippet is looking for a Kanban file with e-matrix in its file name to activate the CSS Snippet.
#### Technical Notes
- Make sure your Obsidian Installer for desktop is at least 1.4.16 or higher. If it isn't, download Obsidian again and reinstall to get the newest installer. Don't worry, you won't lose any data. Also, the installer version is not the same as the product version. So make sure to verify you have updated the installer if it is needed.
- This works on mobile, but it only shows the first line of each card. This is done to keep the quadrants compact on mobile.
- Mobile screens can vary in size, so it may not be possible for the whole grid to be visible. However, you can scroll within the grid.
- The four colors used for the quadrants are pulled from the Obsidian theme red, blue, green, and yellow. Of course, these can be changed in the CSS.
#### CSS Snippet
```css
/*
Author: TfTHacker - more info https://tfthacker.com/eisenhower-matrix-kanban
Date: 2024-02-27
LICENSE: Permission is granted to modify and distribute copies of this CSS file, that credit is given to TfThacker (https://tfthacker.com/)
and the source (https://tfthacker.com/eisenhower-matrix-kanban) remains linked and credited.
*/
.kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 15px;
height: 100%;
overflow-y: auto; /* constrols the vertical scrolling, which is usually disabled in the kanban board */
.kanban-plugin__lane-wrapper {
grid-column: span 1;
grid-row: span 1;
height: 100%;
}
.kanban-plugin__lane-wrapper:nth-child(1) > div {
background-color: rgba(var(--color-red-rgb), 0.2);
}
.kanban-plugin__lane-wrapper:nth-child(2) > div {
background-color: rgba(var(--color-blue-rgb), 0.2);
}
.kanban-plugin__lane-wrapper:nth-child(3) > div {
background-color: rgba(var(--color-green-rgb), 0.2);
}
.kanban-plugin__lane-wrapper:nth-child(4) > div {
background-color: rgba(var(--color-yellow-rgb), 0.2);
}
}
body:not(.is-mobile) {
.kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
.kanban-plugin__lane-wrapper {
width: 100%;
}
}
}
body.is-mobile {
.kanban-plugin__board > :has(* > div > div[data-hitboxid*="e-matrix"]) {
/* make the card one line on mobile to make the matrix compact */
.kanban-plugin__item-title {
line-height: 1.2;
max-height: 1.2em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
```
You can also download this vault with a sample file and the CSS Snippet: [Eisenhower Matrix Obsidian.zip](https://drive.google.com/file/d/1Nw3Rz58L-cFDnEtudiZcMvXzhGs7k6Xp/view?usp=share_link)