Grid sorting appearance customization
The APTO Grid view gives you a thumbnail-driven re-order interface — and with a small, maintainable customization you can make that admin grid match your front-end grid exactly. This guide explains how to implement grid-style changes (where to place code, what to target, and best practices) while leaving the actual code snippet for your demonstration.
This is an example code that constrains the grid to five items per row and sets thumbnail dimensions to 170 pixels.
function apto_grid_custom_admin_styles()
{
echo '<style>
#order-post-type #sortable.view-grid { max-width: 920px; }
#order-post-type #sortable.view-grid li { width: 170px}
< /style>';
}
// Hook the function into 'admin_head' to apply styles in the admin area.
add_action('admin_head', 'apto_grid_custom_admin_styles');
Why customize the admin grid?
A matching admin preview reduces surprises: when editors arrange tiles in the admin they will see the same aspect ratios, gaps and row counts that appear on the public site. It also simplifies workflows for media-rich content like portfolios, products or galleries.
Where to add your customization
Add your code to a child theme functions.php, a small mu-plugin, or a Code Snippets entry so updates won’t be overwritten. Prefer enqueuing a compact admin stylesheet over large inline styles for caching and maintainability.
What to target
Focus on the grid container and item selectors used by APTO: thumbnail size, item width (percent or CSS Grid columns), gap/margin, captions and hover states. Apply responsive rules (media queries) to control items-per-row across viewports so the admin preview behaves like your theme.