diff --git a/rpg-docs/client/views/character/spells/spells.css b/rpg-docs/client/views/character/spells/spells.css
index 49176fd2..4b00a80c 100644
--- a/rpg-docs/client/views/character/spells/spells.css
+++ b/rpg-docs/client/views/character/spells/spells.css
@@ -52,3 +52,38 @@
 	color: #cccccc;
 	color: rgba(0,0,0,0.26);
 }
+
+.spellsContainer{
+	padding: 4px;
+}
+
+.card.spellList {
+	min-width: 280px;
+	margin: 4px;
+}
+
+.card.spellSlotContainer {
+	width: initial;
+	margin: 4px;
+}
+
+.spellList .containerMain {
+	-ms-column-width: 300px;
+	-webkit-column-width: 300px;
+	-moz-column-width: 300px;
+	column-width: 300px;
+	-ms-column-gap: 8px;
+	-webkit-column-gap: 8px;
+	-moz-column-gap: 8px;
+	column-gap: 8px;
+	-moz-column-fill: balance;
+	column-fill: balance;
+}
+
+.spellLevel {
+	-webkit-backface-visibility: hidden;
+	-webkit-transform: translateX(0);
+	-webkit-column-break-inside: avoid;
+	page-break-inside: avoid;
+	break-inside: avoid;
+}
diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html
index c9bfd8f0..dca19600 100644
--- a/rpg-docs/client/views/character/spells/spells.html
+++ b/rpg-docs/client/views/character/spells/spells.html
@@ -1,9 +1,9 @@
 <template name="spells">
 	<div fit>
 		<div id="spells" class="scroll-y" fit>
-			<div class="containers">
+			<div class="spellsContainer" layout horizontal start wrap>
 				{{#if hasSlots}}
-					<paper-shadow class="card container"  hero-id="main" {{detailHero}} style="order: {{containerOrder}};">
+					<paper-shadow class="card container spellSlotContainer"  hero-id="main" {{detailHero}}>
 						<div class="containerTop {{colorClass}}" layout horizontal center>
 							<div class="containerName subhead" hero-id="title" flex>Spell Slots</div>
 						</div>
@@ -26,7 +26,7 @@
 					</paper-shadow>
 				{{/if}}
 				{{#each spellLists}}
-					<paper-shadow class="card container"  hero-id="main" {{detailHero}} style="order: {{order}};">
+					<paper-shadow class="card container spellList"  hero-id="main" {{detailHero}} flex>
 						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
 							<div flex>
 								<div class="containerName subhead">{{name}}</div>
@@ -53,36 +53,36 @@
 						</div>
 						<div class="containerMain">
 							{{#each levels}}
-								{{#if spellCount .. ../../_id}}
-									<div class="list-subhead" layout horizontal center>
-										{{name}}
-									</div>
-								{{/if}}
-								{{#each spells ../_id ../../_id}}
-									{{#if showSpell ../../settings.showUnprepared}}
-										<div class="itemSlot">
-											<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} 
-														layout horizontal center>
-													<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
-												<core-icon icon="social:whatshot" 
-														   style="color: {{hexColor color}};"
-														   ></core-icon>
-												<div flex layout vertical>
-													<div>{{name}}</div>
-													<div class="caption">
-														{{school}} {{castingTime}}
-														{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
-													</div>
-												</div>
-												{{#if ../../settings.showUnprepared}}
-													<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
-												{{else}}
-													<!--<paper-icon-button class="castButton" icon="send"></paper-icon-button>-->
-												{{/if}}
-											</paper-item>
+								<div class="spellLevel">
+									{{#if spellCount .. ../../_id}}
+										<div class="list-subhead" layout horizontal center>
+											{{name}}
 										</div>
 									{{/if}}
-								{{/each}}
+									{{#each spells ../_id ../../_id}}
+										{{#if showSpell ../../settings.showUnprepared}}
+											<div class="itemSlot">
+												<paper-item class="inventoryItem spell" hero-id="main" {{detailHero}} 
+															layout horizontal center>
+														<!--disabled={{cantCast ../level ../../..}} to grey out spells above highest usable slot-->
+													<core-icon icon="social:whatshot" 
+															   style="color: {{hexColor color}};"
+															   ></core-icon>
+													<div flex layout vertical>
+														<div>{{name}}</div>
+														<div class="caption">
+															{{school}} {{castingTime}}
+															{{#if ritual}}(ritual){{/if}}{{#if spellComponents}} - {{spellComponents}}{{/if}}
+														</div>
+													</div>
+													{{#if ../../settings.showUnprepared}}
+														<paper-checkbox class="preparedCheckbox" checked={{isPrepared}} disabled={{cantUnprepare}}></paper-checkbox>
+													{{/if}}
+												</paper-item>
+											</div>
+										{{/if}}
+									{{/each}}
+								</div>
 							{{/each}}
 						</div>
 					</paper-shadow>