Materilalizecss: Card Flow

Question

I have a problem with materializecss: I can't create a flow of cards which would display them like Google Keep: each card takes only as much place as needed and they are placed next to each other like 'puzzles'. I've been trying all the day but haven't made any progress. The flow looks like this right now:

I'd like the layout to look like this:

I'm developing the app with Laravel 5.3. My code looks like this:

index.blade.php:

@extends('layouts.standalone_module', ['brand_logo' => $page->page_title])

@section('mod_title')
    {{ $page->page_title }}
@endsection

@section('mod_breadcrumbs')
    <a href="{{ $base_slug }}" class="breadcrumb">{{ \App\Toolbox::string_truncate($page->page_title, 25) }}</a>
@endsection

@section('mod_main')
        <div class="col s10 offset-s1 card-panel white-text teal z-depth-2 hoverable center row">
           <h3 class="col s12">{{ $page->page_title }}</h3>
           <div class="col s12 row white divider" style="height: 2px;"></div>
          <h5 class="col s12">{{ $page->page_header }}</h5>
        </div>
            @include('hydrogen::partials/list', ['atoms' => $atoms])
@endsection

list.blade.php:

@php
$ct = 0;
@endphp

@foreach ($atoms as $key => $atom)
    @php
    $ct++
    @endphp
    <div class="container col s6 row">
        <div class="card hoverable z-depth-2 center">
            @if($atom->hasImage)
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" src="{{ $atom->image }}">
                </div>
                <div class="card-reveal">
                    <span class="card-title col s12"><span class="left">{{ $atom->title }}</span><i class="material-icons teal-text right">close</i><a href="{{ $base_slug }}/atom/{{ $atom->id }}"><i class="material-icons right">open_in_new</i></a></span>
                    <div class="divider teal col s12" style="margin-top: 5px; margin-bottom: 10px;"></div>
                    {!! $atom->description !!}
                </div>
            @else
                <div class="card-title">
                    <div class="col s12" style="height: 15px;"></div>
                    <div class="col s10">
                        <p class="truncate left">
                            &nbsp;&nbsp;{{ $atom->title }}
                        </p>
                    </div>
                    <div class="col s2">
                        <a href="{{ $base_slug }}/atom/{{ $atom->id }}"><i class="material-icons teal-text">open_in_new</i></a>
                    </div>
                </div>
            @endif
            <div class="card-content">
                @if($atom->hasImage)
                    <span class="card-title activator" style="text-align: left;">
                        {{ $atom->title }}
                        <i class="material-icons right">more_vert</i>
                    </span>
                    <p class="teal-text" id="artificial-link" style="text-align: left;" onclick="window.location.href='{{ $base_slug }}/atom/{{ $atom->id }}'">{{ trans("hydrogen::hydrogen.atom_card_link_read") }}</p>
                    <style>
                        #artificial-link:hover{
                            cursor: pointer;
                        }
                    </style>
                @else
                    <div class="divider teal col s12" style="margin-top: 5px; margin-bottom: 10px;"></div>
                    {!! $atom->description !!}
                @endif
            </div>
        </div>
    </div>
@endforeach

@if ($ct == 0)
    @include('partials/error', ['error' => trans("hydrogen::messages.err_no_atoms")])
@endif

Using [email protected] Can anyone help me?

Answer 1

Hi currently you are inserting all your div(s) in single parent you need to use two parent div(s) of 50% width and put you content in those divs like this. Change your foreach loop in blade.php to make it work accordingly. you can use a flag if needed in foreach loop

<div class="col-s6">
div1
div2
div3…
</div>
<div class="col-s6">
div4
div5
div6…
</div>