How to create multi column view in New Google Sites ?️‍🔥

Many times we have to display some content in column format. There are two ways to achieve it on Google sites:

Using the in-built auto grid to align three fields
Using embed to add three divisions

Method 1: In this method, simply adjust the text boxes by resizing to form a column view and after adding content it will look like:

But here you can’t add CSS attributes, yet!! For that following method 2 is perfect.

Method 2: To add multiple column view in your Google site website select embed option from the insert panel and then go to embed code division of the dialogue box appeared.

Write your code in the space provided. To add a multi-column view use this code:

HTML

<html> 
  
<head> 
    <title>Three Column CSS Layout</title> 
    <style type="text/css"> 
        body { 
            margin-top: 0; 
            margin-bottom: 0; 
            margin-left: 0; 
            margin-right: 0; 
            padding-left: 1; 
            padding-right: 0; 
        } 
  
        #left { 
            position: absolute; 
            background-color: Orange; 
            font-family: verdana; 
            left: 5px; 
            padding: 1px; 
            top: 0px; 
            width: 270px; 
        } 
  
        #center { 
            margin-left: 290px; 
            padding: 0px; 
            margin-right: 320px; 
            top: 0px; 
        } 
  
        #right { 
            position: absolute; 
            background-color: Crimson; 
            font-family: arial; 
            right: 15px; 
            padding: 1px; 
            top: 0px; 
            width: 290px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="left"> 
        <h3>Beginner For Beginner</h3> 
        w3wiki is a Computer Science  
        portal for Beginner. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
  
    <div id="center"> 
        <h3>Beginner For Beginner</h3> 
        w3wiki is a Computer Science  
        portal for Beginner. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
  
    <div id="right"> 
        <h3>Beginner For Beginner</h3> 
        w3wiki is a Computer Science  
        portal for Beginner. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
</body> 
  
</html>

The page will look like: