diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 3417716ca..e56cb85f6 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -2,7 +2,7 @@
   --grid-lines: 3px;
 
   border-block-start: 1px solid var(--color-subtle);
-  display: grid;
+  display: none;
   gap: var(--grid-lines);
   grid-template-columns: repeat(4, 1fr);
   padding-block-start: var(--block-space);
@@ -20,6 +20,16 @@
   padding: calc(3 * var(--block-space));
 }
 
+.events--day:has(.event:not(.out-of-range)) {
+  .events {
+    display: grid;
+  }
+
+  .events--none {
+    display: none;
+  }
+}
+
 .event-grid-item {
   background-color: var(--color-selected);
   block-size: 100%;
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index d421db034..a59347f07 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,13 +1,12 @@
-<div class="margin-block-end-double pad-block-end" data-controller="timeline" data-timeline-date-value="<%= activity_day.to_date.iso8601 %>">
+<div class="events--day margin-block-end-double pad-block-end" data-controller="timeline" data-timeline-date-value="<%= activity_day.to_date.iso8601 %>">
   <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
-  <% if @events.any? %>
-    <div class="center events">
-      <%= render_column_headers %>
-      <%= render_event_grid_cells(activity_day) %>
-      <%= render_time_labels(activity_day) %>
-      <%= render events %>
-    </div>
-  <% else %>
-    <p class="events--none txt-align-center">No activity for this day.</p>
-  <% end %>
+
+  <div class="center events">
+    <%= render_column_headers %>
+    <%= render_event_grid_cells(activity_day) %>
+    <%= render_time_labels(activity_day) %>
+    <%= render events %>
+  </div>
+
+  <p class="events--none txt-align-center">No activity for this day.</p>
 </div>