Split screen

Once again, click the button below and have a look at the final demo of our portfolio.

Pay attention to the characteristic screen divided into two equal parts. This is a variation of the Full Screen Hero Image, which you know from the previous tutorial.

In this lesson, we will learn a technique that will allow us to create such a Split screen.

Step 1 - create a 2 columns grid

Creating a basic Split screen layout in Tailwind CSS is simple, but the complications start with the details.

However, before we get to the complications, in the <header> section, let's add the Split screen section, and then let's add the well-known grid, using .grid and .grid-cols-2 classes.

Add this code to the header section:

        
            


    <!--Main Navigation-->
    <header>
      <!-- Section: Split screen -->
      <section class="">
        <!-- Grid -->
        <div class="grid grid-cols-2">
          <!-- First column -->
          <div class="bg-red-500"></div>
          <!-- First column -->

          <!-- Second column -->
          <div class="bg-blue-500"></div>
          <!-- Second column -->
        </div>
        <!-- Grid -->
      </section>
      <!-- Section: Split screen -->
    </header>
    <!--Main Navigation-->

    
        
    

As you can see, we added color classes (.bg-red-500 and .bg-blue-500) to each of the columns. We did this for testing purposes to see if everything works as it should. Grid elements are transparent by default, so without it we wouldn't be able to see if our code is working properly.

However, when you save the file, you'll see that we still have a completely white screen. We'll fix it in the next step.

Step 2 - set a height of the grid

As with the classic Hero Image, with our Split screen we also want it to always cover the full screen.

So let's add the h-screen class to the grid. It will set the height of the grid to 100vh units, which means full available space on the screen.

        
            


    <!-- Section: Split screen -->
    <section class="">
      <!-- Grid -->
      <div class="grid h-screen grid-cols-2">[...]</div>
      <!-- Grid -->
    </section>
    <!-- Section: Split screen -->

    
        
    

And done! Simple, right?

Step 3 - clean up the code

Let's clean up our code a bit - let's remove color classes from the grid that we used for testing purposes.

        
            


    <!--Main Navigation-->
    <header>
      <!-- Section: Split screen -->
      <section class="">
        <!-- Grid -->
        <div class="grid h-screen grid-cols-2">
          <!-- First column -->
          <div class=""></div>
          <!-- First column -->

          <!-- Second column -->
          <div class=""></div>
          <!-- Second column -->
        </div>
        <!-- Grid -->
      </section>
      <!-- Section: Split screen -->
    </header>
    <!--Main Navigation-->

    
        
    

And here we are, again with the white screen. But not for long 😉