Grid Switch
A grid/list layout switcher plugin.
Projects /
A grid/list layout switcher plugin.
All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.
To use this component, include the following dependencies:
The Grid Switch component is used to switch between two layouts (e.g., switch between grid and list gallery views). You're not limited to the card in the demo; the component works with any content type.
Pass the following data attributes to the .js-grid-switch
element:
data-gs-item-class-1
→ list of classes added to the list items if layout = 1data-gs-item-class-2
→ list of classes added to the list items if layout = 2data-gs-content-class-1
→ list of classes added to the list content (card) if layout = 1data-gs-content-class-2
→ list of classes added to the list content (card) if layout = 2Add the following classes to the grid switch children:
js-grid-switch__controller
to the controller → in can be any radio button (remember to add value=1 to the first radio button, value="2" to the second one)js-grid-switch__item
to the grid list itemsjs-grid-switch__content
to the content (e.g., card elements)The gap among the grid items is set using the CodyFrame's grid utility classes.
Here's a simplified version of the demo code:
<div class="grid-switch js-grid-switch"
data-gs-item-class-1="col-12 [email protected]"
data-gs-item-class-2="col-12"
data-gs-content-class-1="card-v10--state-1"
data-gs-content-class-2="card-v10--state-2">
<!-- controller 👇 -->
<div class="js-grid-switch__controller">
<div>
<input type="radio" name="radio-view-option" id="radio-grid" value="1" checked>
<label for="radio-grid">Grid</label>
</div>
<div>
<input type="radio" name="radio-view-option" id="radio-list" value="2">
<label for="radio-list">List</label>
</div>
</div>
<!-- grid 👇 -->
<ul class="grid gap-md">
<li class="js-grid-switch__item">
<div class="js-grid-switch__content"></div>
</li>
<li class="js-grid-switch__item">
<div class="js-grid-switch__content"></div>
</li>
<li class="js-grid-switch__item">
<div class="js-grid-switch__content"></div>
</li>
</ul>
</div>
Create a CodyHouse account to unlock members-only features and join our community of web designers!