Available in the OSS Version

Layout Manager - Column Layout

This sample demonstrates how the Layout Manager control's Column layout can be used by assigning classes to items thus specifying the area their content will span over.

Heading

This is a paragraph that spans 7 cols

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus.

This paragraph spans 2 cols.

This is a paragraph that spans 2 cols. it goes to the next line because the above paragraph is wrapped in a 12-col container (pink border)

This is a paragraph that spans 5 cols

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample does not use JavaScript initialization code: it is done with CSS and HTML only.

Code View

Show In JsFiddle

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ignite UI for jQuery Layout Manager - Fluid 12 column layout based on CSS only - init from markup</title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Modernizr/jQuery/jQuery UI -->
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
	<style type="text/css">

		body {
			font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
			background-color: #fff;
		}

		.col3 {
			background-color: #EEE;
			color: #555;
			padding: 0 20px 20px 20px;
			margin: 0 0 20px 0;
		}

		#layout .col12 {
			border:2px dashed #999;
			margin: 0 0 20px 0;
		}

		#layout .col7 {
			background-color: #FFA72D;
			color: #FFF;
			padding: 0 20px 20px 20px;
			margin: 0 0 20px 0;
		}

		#layout .col4 {
			background-color: #ffaf41;
			color: #fff;
			padding: 0 20px 20px 20px;
		}

		#layout .col2 {
			background-color: rgb(0, 155,225);
			color: #FFF;
			padding: 0 20px 20px 20px;
		}

		#layout .col5 {
			background-color: #00CCFF;
			padding: 0 20px 20px 20px;
			color: #FFF;
		}
	    @media screen and (min-width: 768px) {
	        #sampleContainer {
	            margin-left: 0;
	        }
	    }

	    .ig-layout-col {
            padding-left: 0;
        }
	</style>
	<div id="layout" class="ig-layout-col">
		<div class="row">
			<div class="col3">
			    <h3>Heading</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
			    <h3>Heading</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
				<h3>Heading</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
			<div class="col3">
				<h3>Heading</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			    </p>
			</div>
		</div>
		<div class="row">
			<div class="col12">
				<div class="col7">
					<h3>This is a paragraph that spans 7 cols</h3>
				    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus. 
				    </p>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col2">
				<h3>This paragraph spans 2 cols.</h3>
			    <p>This is a paragraph that spans 2 cols. it goes to the next line because the above paragraph is wrapped in a 12-col container (pink border) </p>
			</div>
			<div class="col5">
				<h3>This is a paragraph that spans 5 cols</h3>
			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus.</p>
			</div>
		</div>
	</div>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

Layout Manager - Column Layout

Heading

Heading

Heading

Heading

This is a paragraph that spans 7 cols

This paragraph spans 2 cols.

This is a paragraph that spans 5 cols

Code View