Blazor movie tutorial QuickGrid styling (#34227)

Author: guardrex

aspnetcore/blazor/components/quickgrid.md

@@ -138,18 +138,36 @@ To provide a UI for pagination, add a [`Paginator` component](xref:Microsoft.Asp
 
 In the running app, page through the items using a rendered `Paginator` component.
 
-QuickGrid renders additional empty rows to fill in the final page of data when used with a `Paginator` component. In .NET 9 or later, empty data cells (`<td></td>`) are added to the empty rows. The empty rows are intended to facilitate rendering the QuickGrid with stable row height and styling across all pages. You can apply styles to the rows using [CSS isolation](xref:blazor/components/css-isolation) by wrapping the `QuickGrid` component in a wrapper element, such as a `<div>`, and applying a row style with `::deep` [pseudo-elements](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements):
+QuickGrid renders additional empty rows to fill in the final page of data when used with a `Paginator` component. In .NET 9 or later, empty data cells (`<td></td>`) are added to the empty rows. The empty rows are intended to facilitate rendering the QuickGrid with stable row height and styling across all pages.
+
+## Apply row styles
+
+Apply styles to rows using [CSS isolation](xref:blazor/components/css-isolation), which can include styling empty rows for `QuickGrid` components that [page data with a `Paginator` component](#page-items-with-a-paginator-component).
+
+Wrap the `QuickGrid` component in a wrapper block element, for example a `<div>`:
+
+```diff
++ <div>
+    <QuickGrid ...>
+        ...
+    </QuickGrid>
++ </div>
+```
+
+Apply a row style with the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements). In the following example, row height is set to `2em`, including for empty data rows.
+
+`{COMPONENT}.razor.css`:
 
 ```css
 ::deep tr {
     height: 2em;
 }
 ```
 
-To hide the empty row data cells rendered by the QuickGrid, use CSS styling. In the following isolated CSS styles:
+Alternatively, use the following CSS styling approach:
 
-* Row cells populated with data are displayed.
-* Empty row data cells aren't displayed, which avoids empty row cell borders from rendering per Bootstrap styling.
+* Display row cells populated with data.
+* Don't display empty row cells, which avoids empty row cell borders from rendering per Bootstrap styling.
 
 `{COMPONENT}.razor.css`:
 

aspnetcore/blazor/tutorials/movie-database-app/part-8.md

@@ -118,11 +118,11 @@ Run the app and navigate to the movies `Index` page. You can page through the mo
 
 The component is *interactive*. The page doesn't reload for paging to occur. The paging is performed live over the SignalR connection between the browser and the server, where the paging operation is performed on the server with the rendered result sent back to the client for the browser to display.
 
-Change <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to a more reasonable value, such as 10 items per page:
+Change <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to a more reasonable value, such as five items per page:
 
 ```diff
 - private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
-+ private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
++ private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
 ```
 
 ## Sortable `QuickGrid`
@@ -199,6 +199,44 @@ Filtering database records is performed on the server, and the server interactiv
 
 Instead of an HTML form, submitting a GET request in this scenario could've also used JavaScript to submit the request to the server, either using the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API)` or [XMLHttpRequest API](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest). In most cases, JavaScript can be replaced by using Blazor and C# in an interactive component.
 
+## Style the `QuickGrid` component
+
+You can apply styles to the rendered `QuickGrid` component with a stylesheet isolated to the `Index` component using *CSS isolation*.
+
+CSS isolation is applied by adding a stylesheet file using the file name format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is the component name.
+
+To apply styles to a child component, such as the `QuickGrid` component of the `Index` component, use the `::deep` pseudo-element. 
+
+In the `MoviePages` folder, add the following stylesheet for the `Index` component. Use `::deep` pseudo-elements to make the row height `3em` and vertically center the table cell content.
+
+`Components/Pages/MoviePages/Index.razor.css`:
+
+```css
+::deep tr {
+    height: 3em;
+}
+
+    ::deep tr > td {
+        vertical-align: middle;
+    }
+```
+
+The `::deep` pseudo-element only works with descendant elements, so the `QuickGrid` component must be wrapped with a `<div>` or some other block-level element in order to apply the styles to it.
+
+In `Components/Pages/MoviePages/Index.razor`, place `<div>` tags around the `QuickGrid` component:
+
+```diff
++ <div>
+    <QuickGrid ...>
+        ...
+    </QuickGrid>
++ </div>
+```
+
+Blazor rewrites CSS selectors to match the markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset, so you don't need to take further action to apply the styles to the rendered `QuickGrid` component.
+
+![Movie list showing row heights at 3em with vertically-centered content](~/blazor/tutorials/movie-database-app/part-8/_static/styled-quickgrid.png)
+
 ## Clean up
 
 :::zone pivot="vs"