document grid areas

Author: AdrianMrn

docs/handling-uploads-with-media-library-pro/customizing-css.md

@@ -13,7 +13,7 @@ In this video, you'll see the various option on how to customize the look and fe
 
 Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/videos/discovering-laravel-media-library).
 
-## Option 1: Use your own Tailwind CSS configuration
+### Option 1: Use your own Tailwind CSS configuration
 
 Instead of importing/linking the pre-built `dist/styles.css` from the package, you can import the `src/styles.css` and run every `@apply` rule through your own `tailwind.config.js`.
 
@@ -33,7 +33,7 @@ Instead of importing/linking the pre-built `dist/styles.css` from the package, y
 
 This is exactly what happens in the header of the homepage at [medialibrary.pro](https://medialibrary.pro): the shown component has a slightly blue-ish look, using the color palette of this site.
 
-## Option 2: Override only portions in your CSS
+### Option 2: Override only portions in your CSS
 
 If you only want to tinker with certain aspects of the component but like to keep the CSS in sync with future package updates, nothing stops you from overriding only certain CSS rules with your own tweaks. Every DOM-element of the component has a class with prefix `media-library`.
 
@@ -53,7 +53,7 @@ Inspect the component in your browser to find out that the thumbnail is rendered
 
 ```
 
-## Option 3: Copy the CSS to your own project
+### Option 3: Copy the CSS to your own project
 
 If you want to go full-option, you can always copy `src/styles.css` to your own project and go wild.
 In this example we renamed the file to `custom/media-library.css`.
@@ -91,3 +91,24 @@ If you're using PurgeCSS, you might have to add a rule to your whitelist pattern
 ```js
 mix.purgeCss({ whitelistPatterns: [/^media-library/] });
 ```
+
+## Changing the order of the sections
+
+The components have three major sections that are rendered in this order: the validation errors, the items and the uploader.
+
+![Screenshot of component](/docs/laravel-medialibrary/v9/images/pro/sections.png)
+
+You can change the order of these sections to be more consistent with your app, without having to create a custom component from scratch.
+
+Add the following lines to your CSS, and switch the order of the sections around to your liking.
+
+```css
+.media-library-multiple {
+    grid-template-areas:
+        "uploader"
+        "items"
+        "errors";
+}
+```
+
+![Screenshot of component with sections in different order](/docs/laravel-medialibrary/v9/images/pro/sections-order-switched.png)