Product Options Horizontal to Grid/Rows

I hope I am in the right forum. I have searched the internet, opencart forums for a few days and cannot find my answer exactly. I am using 3.02.0 version. I have several color options for shirts/clothing. I would like to know if there is any coding I can change and where to change it to make my product options on the product page in a grid such as 9 rows with 3 colors per row instead of the long horizontal single row. Thank you in advance.

You can achieve a grid by using
checkbox {
width: 33%;
float: left;
}
checkbox:first-child {
margin-top: -5px;
}
In theory you can add this to your css file, but it will change checkboxes everywhere.

You could add the css to your catalog/view/theme/default/product/product.twig page only ------- using the css within the tags <style> </style>
You could edit your catalog/view/theme/default/product/product.twig page ----- adding this to the actual checkbox lines of code

and this extension allows images in a select dropdown
https://www.opencart.com/index.php?rout ... n_id=37073

Thank you!

dear Mona
would it be possible to pay you for adding this grid to my site?
and i have another project that i could use your help with