How to create multi column view in New Google Sites ?

Last Updated : 10 Sep, 2020

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>Geeks For Geeks</h3> 
        GeeksforGeeks is a Computer Science  
        portal for geeks. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
  
    <div id="center"> 
        <h3>Geeks For Geeks</h3> 
        GeeksforGeeks is a Computer Science  
        portal for geeks. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
  
    <div id="right"> 
        <h3>Geeks For Geeks</h3> 
        GeeksforGeeks is a Computer Science  
        portal for geeks. It contains well  
        written, well thought and well  
        explained computer science and  
        programming articles, quizzes etc. 
    </div> 
</body> 
  
</html>