Group posts by date in Wordpress

Am trying to create a page where the posts are grouped by date and shown in grid. Here is the image but it shows the posts in list format instead, i don't know why.

The code i've so far

<?php
 
/*
Template Name: Videopage
 
*/
 
?>
<?php get_header(); ?>
 
<div class= "topvid">
 
<iframe width="630" height="354" src="http://www.youtube.com/embed/W-o14APX6js" frameborder="0" allowfullscreen></iframe>
</div>
 
<?php /*?><?php
 
$args = array('posts_per_page' => -1, 'orderby' => 'date' );
 
$myQuery = new WP_Query($args);
 
 
$date = '';
 
if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
 
if ( $date != get_the_date() ) {
 
    echo $date;
 
    echo '<hr />';
 
    $date = get_the_date();
 
}
 
the_title(); // or whatever you want here.
 
echo '<br />';
 
endwhile; endif;
 
wp_reset_postdata(); ?><?php */?>
 
  <?php
 
  $args = array('cat'=>7,'posts_per_page'=>18 );
 
$myQuery = new WP_Query($args);
 
$date = '';
 
 // query_posts(array('cat'=>7,'posts_per_page'=>18  )); ?>
 
<?php //echo get_the_date(); ?>
 
    <?php //while ( have_posts() ) : the_post(); ?>
 
 
<?php if ( $myQuery->have_posts() ) : while ( $myQuery->have_posts() ) : $myQuery->the_post();
 
if ( $date != get_the_date() ) { ?>
 
<?php    $date = get_the_date(); ?>
 
<div class="content-text"> <?php  echo $date; ?></div>
 
 
<?php /// echo '<hr />'; ?>
 
   
<?php }
 
?>
 
<div class="loop <?php if ($_COOKIE['mode'] == 'grid') echo 'grid'; else echo 'grid'; ?> clear">
 
        <div <?php post_class('post2 clear'); ?> id="post_<?php the_ID(); ?>">
 
                   <?php if ( has_post_thumbnail() ) :?>
 
            <a href="<?php the_permalink() ?>" class="thumb"><?php the_post_thumbnail('thumbnail', array(
 
                        'alt'    => trim(strip_tags( $post->post_title )),
 
                        'title'    => trim(strip_tags( $post->post_title )),
 
                    )); ?></a>
 
            <?php endif; ?>
 
<h2><a href="<?php the_permalink() ?>"><?php if (strlen($post->post_title) > 50) {
echo substr(the_title($before = '', $after = '', FALSE), 0, 70) . '...'; } else {
 
the_title();
 
} ?></a></h2>
 
<!--div class="loopview"> <?php if(function_exists('the_views')) { the_views(); } ?></div-->
            <a href="<?php the_permalink() ?>" class="loop_play" style="left:35px;">Play</a>
 
        </div>
 
    </div>
    <?php //endwhile; ?>
 
<?php endwhile; endif; ?>   
    <div class="bottom_loop"></div>
    <br />
<?php get_template_part('pagination'); ?>
 
<?php /*?><?php comments_template(); ?>
 
<?php */?>
<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
 
        wpcf7_enqueue_scripts();
        wpcf7_enqueue_styles();
    }
?>
<?php get_footer(); ?>

PHP:

What am i doing wrong?

 

are you displaying the blocks as inline or just as blocks ?
you need to display them as inlineblock or float them to the left or right, otherwise they will stack under each other like what you are seeing