diff --git a/src/components/views/ArtistDetailView.tsx b/src/components/views/ArtistDetailView.tsx
index 25b9018..43463fe 100644
--- a/src/components/views/ArtistDetailView.tsx
+++ b/src/components/views/ArtistDetailView.tsx
@@ -339,7 +339,7 @@ export function ArtistDetailView({
           <h2 className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase px-1">
             {t("artistDetail.similar.title")}
           </h2>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {similar.map((s) => {
               const inLibrary = s.library_artist_id != null;
               const imgSrc = resolveRemoteImage(s.picture_path, s.picture_url);
@@ -399,7 +399,7 @@ export function ArtistDetailView({
           <h2 className="text-[10px] font-bold tracking-widest text-zinc-400 uppercase px-1">
             {t("artistDetail.discography")}
           </h2>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5">
             {artist.albums.map((album) => (
               <button
                 key={album.id}
diff --git a/src/components/views/HomeView.tsx b/src/components/views/HomeView.tsx
index 0beda48..7afda32 100644
--- a/src/components/views/HomeView.tsx
+++ b/src/components/views/HomeView.tsx
@@ -516,7 +516,7 @@ export function HomeView({
             </EmptyState>
           </div>
         ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {recentPlays.map((play, idx) => {
               const isCurrent = play.track_id === currentTrack?.id;
               return (
@@ -583,7 +583,7 @@ export function HomeView({
               {t("home.seeAll")}
             </button>
           </div>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4">
             {recentAlbums.map((album) => (
               <button
                 key={album.id}
diff --git a/src/components/views/LibraryView.tsx b/src/components/views/LibraryView.tsx
index 864eb1f..de23687 100644
--- a/src/components/views/LibraryView.tsx
+++ b/src/components/views/LibraryView.tsx
@@ -1351,7 +1351,7 @@ function AlbumGrid({
   return (
     <>
       <div
-        className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5 ${
+        className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5 ${
           isLoading ? "opacity-50" : ""
         }`}
       >
@@ -1511,7 +1511,7 @@ function ArtistList({
   return (
     <div
       ref={gridRef}
-      className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5 ${
+      className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-5 ${
         isLoading ? "opacity-50" : ""
       }`}
     >
@@ -1609,7 +1609,7 @@ interface GenreListProps {
 function GenreList({ genres, isLoading, t }: GenreListProps) {
   return (
     <div
-      className={`grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 ${
+      className={`grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4 ${
         isLoading ? "opacity-50" : ""
       }`}
     >