Here is a very simple one…
I had a screen with a bunch of switch components, in groups:
By applying a bit of CSS, I was able to inset them slightly to make the grouping more obvious:
<pre><span><style>
[data-test="app-switch-view"] {
padding: 5px 30px;
}
That looks very nice! Thanks for sharing.
Hi, Darren 
. My 2 cents.
Maybe if you alternate sections backgrounds (just light silver/white/silver/white, nothing foolish), it would be easier to distinguish them (where a section begins and ends) and create a reading rythm, less monotonous.
Maybe with alternate soft BCG, you no longer need hard separators that strikes through the screen and actually lay more stress on the lines than the contents.
Personal style of course
Whenever I present tables, or organise form fields in tables, I personally always change the default black “violent” borders, as they are not the main interest, but the cells contents. To almost transparency, as you’ll always know where the borders are, needless to insist heavily on the frame, but rather on the subject that matters.
Edit : besides, is it possible to display the switches in 3 columns and 1 row only?
It’s short enough in English.
This would avoid scroll and as the switches are repetitive, compact the layout to compensate.
Maybe you can reorganise the switch so as not to repeat the 3 words Create, Read and Update. Like switches inside a table where the Create, Read, Updates are 3 column titles effect. And the User Targets as row titles. Like a questionnaire with Checkboxes and not a single word repeated for better readability.
Do you really have to repeat the word “Admin” in “Admin permissions”? As the screen already filters on “Admin”, or?
if you repeat words, that can “hide” what really matters: the preferences switches.
And occupy a lot of layout especially for bold titles.
wow, that’s a lot of feedback.
I appreciate the fact that you took the time to think about that and share your thoughts. Thank you.
Only thing is, I wasn’t actually looking for any feedback. What you see there is hardly a finished version of that particular screen. All I was doing was sharing a little CSS trick. No more, no less 
Yes, Darren, I somehow guessed that way, too sorry for the trolling.
But you helped me think about what I could consider later, so thanks for that.
1 stone 2 targets 
(don’t shoot the birds, I’m not a hunter).
I know there are limits in tables and switches layout, but you never know, maybe some CSS Experts can manage to reorganize to optimize.
Kind of stuck at this stage
Yes, agreed. That would be very cool.
I’ve seen that done with choice components, but not with switches. But I imagine it should be possible…
Oh, it’s possible with choice components? And checkboxes? Do you happen to remember where the tricks are?
like that? SAMPLE
Can the S1 to S3 be above the switches, so as not to repeat the titles for each row of 3 switches?
you can put css text anywhere you want, and take out switches titles
Thks, Uzo, you’re a boss 
With what component if any you created the date number boxes? Buttons you CSS to organize them in rows and columns?
date numbers? Do you mean an 8x8 grid?
Yes I do.
this is an inline list cards view… it is in Code BOOK I just modify a little…
<table style="table-layout: fixed;
width: calc(110% - 40px);
margin-top:-30px;
text-align:left;
font-size:12px;
color:grey;
-ms-transform: translate(50%, 0%);
transform: translate(1%, 0%);
">
<pre><span><style>
/* Rich Text */
[data-test="app-markdown-view"] {
height:0px;
}
/* All Card */
[data-test="app-horizontal-list"] {
margin-top:-0px;
}
/* Horizontal List x 7 */
[data-test=app-horizontal-list] .inner {
grid-template-columns: repeat(8, 48%) !important;
column-gap: 9px !important;
row-gap:9px;
width: 27%;
padding:3px 10px 9px 18px !important;
}
/* Image */
.card-image-container {
height:50px;
opacity: 0.5;
}
/* All Item */
[data-test="app-horizontal-list"] .card-title-container {
margin-bottom: -6px !important;
margin-top: 15px !important;
margin-bottom:-9px !important;
}
/* Avatar, Avatar Text, Caption */
[data-test="app-horizontal-list"] .bottom-area {
padding: 0px 0px !important;
margin-top:-1px;
z-index:1;
}
/* Header */
[data-test="app-horizontal-list"] .card-header{
text-align:center;
color:#B0B0B0 !important;
margin-top:-58px;
cursor: pointer;
/border-bottom: 1px ridge rgb(120, 120, 120, .4);
}
/* Title */
[data-test="app-horizontal-list"] .card-title {
text-align: center;
margin-top:-60px;
/border-bottom: 1px ridge rgb(120, 120, 120, .4);
}
and this is for 3 switches in a row:
<pre><span><style>
div[id*='screenScrollView'] >div>:nth-child(3) {
margin-left:-0px;
width:33%;
}
div[id*='screenScrollView'] >div>:nth-child(4) {
margin-top:-50px;
margin-left:40%;
transform: translateX(-25%);
width:33%;
}
div[id*='screenScrollView'] >div>:nth-child(5) {
margin-top:-50px;
margin-left:75%;
transform: translateX(-25%);
width:33%;
}
I did play around with multiple switches on a line, but the problem is that I have a variable number of switches per group. Some have 3, and some have 4. And in the future some may even have 5 or 6. That would have been a nightmare to maintain, so in the end I decided to keep it simple and implement it accordion-style 
How do I create such dropdown lists
There is nothing particularly special there, it’s just a combination of visibility settings, custom actions and a little bit of data editor logic.