Muffin UI | Grids

Grid

Grids adapt to screen size and orientation, ensuring consistency across layouts. For using grids, you have to add grid as class name.

Grid 50-50 Layout

This variant can be used by adding grid-50-50 to the div tag.

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio ipsa sequi eius in. Animi autem ullam ea voluptatibus, reprehenderit suscipit sint quos, totam reiciendis beatae expedita maxime

Copy
                    <div class="grid grid-50-50">
                        <div>
                            <img src="https://picsum.photos/id/110/600/400" alt="sunset" class="img-responsive">
                        </div>
                        <div>
                            <h4 class="heading4">Lorem Ipsum</h4>
                            <p>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio ipsa sequi eius in. Animi autem ullam ea voluptatibus, reprehenderit suscipit sint quos, totam reiciendis beatae expedita maxime
                            </p>
                        </div>      
                    </div>

Grid 30-70 Layout

This grid layout can be used by adding the class name as grid-30-70

Lorem Ipsum

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio ipsa sequi eius in. Animi autem ullam ea voluptatibus, reprehenderit suscipit sint quos, totam reiciendis beatae expedita maxime repellat nobis

Copy
                    <div class="grid grid-30-70">
                        <div>
                            <img src="https://picsum.photos/id/110/600/400" alt="sunset" class="img-responsive">
                        </div>
                        <div>
                            <h5 class="heading5">Lorem Ipsum</h4>
                            <p>
                                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio ipsa sequi eius in. Animi autem ullam ea voluptatibus, reprehenderit suscipit sint quos, totam reiciendis beatae expedita maxime repellat nobis
                            </p>
                        </div>        
                    </div>

Grid 3 Column Layout

This grid layout can be used by adding the class name as grid-3-column.

Copy
                    <div class="grid grid-3-column">
                        <div>
                            <img src="https://picsum.photos/id/110/600/400" alt="sunset" class="img-responsive">
                        </div>
                        <div>
                            <img src="https://picsum.photos/id/110/600/400" alt="sunset" class="img-responsive">
                        </div>
                        <div>
                            <img src="https://picsum.photos/id/110/600/400" alt="sunset" class="img-responsive">
                        </div>  
                    </div>