About Grid Size

[ZizyLiz]

Does anyone know how to make the grid size smaller? I'm a bit uncomfortable with the large grid size, as it reduces the number of titles on my screen.

[Salman-Sensei]

Hey there!

If you’re using plain CSS Grid, you can pack more items on screen by shrinking the “min” value in your grid-template-columns. For example:

code in css

.grid-container {
display: grid;
/* originally minmax(200px, 1fr); change 200px → 120px (or whatever feels right to you ZizyLiz) /
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-gap: 8px; / optional: shrink gap too */
}
That 120px is the minimum width of each cell , Lower it to fit more titles. You can also tweak padding/font-size inside the items if you need them even tighter.

If you’re on a component library, here are quick tweaks:

Material-UI DataGrid: ( actually it's part of MUI X, is a React and TypeScript component )

jsx ...JavaScript XML

<DataGrid
density="compact" // packs rows tighter
rowHeight={32} // default is 52px
columnHeaderHeight={32} // default is 56px
…
/>

AG Grid:

js ... JavaScript
gridOptions = {
rowHeight: 28, // default ~25–30px
headerHeight: 28,
// or use api.setRowHeight()/api.resetRowHeights() at runtime
}

[hamse122]

You can make the grid size smaller by adjusting the CSS properties that define the grid layout. Try reducing the size of the grid items or changing the number of columns. For example:

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}

thank you