Cara Mudah Belajar Grid Sistem Pada Segment UI

Pada kesempatan kali ini saya akan membahas tentang Cara Mudah Belajar Grid Sistem Pada Segment UI, tidak jauh berbeda dengan framework-framework lainnya seperti bootstrap, materialize dan masih banyak lainnya, segment ui juga memiliki sistem grid pada pembagaian kolomnya, apa sih grid sistem itu grid system biasanya digunakan untuk membuat sebuah tampilan menjadi bagian-bagian, atau terpecah dengan kolom lainnya, contohnya seperti gambar ini ini,

Kita akan membuat seperti gambar diatas, teman-teman bisa siapkan file baru namanya bebas dan bisa ikuti scriptnya dibawah ini:

<head>
<link rel="stylesheet" type="text/css" href="semantic.min.css">
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	<script src="semantic.min.js"></script>
</head>
<body>
<div class="ui container">
		<div class="ui internally celled grid">
			<div class="row">
			  <div class="three wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quae dicta dolorem repellendus rem accusantium omnis, libero quas impedit, vitae assumenda quidem. Nobis sunt enim beatae inventore maiores rem aperiam?</p>
			  	<a href="" class="ui inverted green button">Read More</a>
			  </div>
			  <div class="ten wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui centered medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem id illo nemo illum architecto eveniet possimus odit et ex facilis consequatur accusamus, omnis temporibus necessitatibus asperiores assumenda iusto repellat modi.</p>
			  	<a href="" class="ui inverted teal button">Read More</a>
			  </div>
			  <div class="three wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae ipsam ipsa ratione deleniti, eveniet odio nulla enim velit rem impedit. Architecto quibusdam maiores iure inventore corporis unde sequi id facere.</p>
			  	<a href="" class="ui inverted pink button">Read More</a>
			  </div>
			</div>
			<div class="row">
			  <div class="ten wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sunt quas tempore doloribus unde vero, tempora commodi, blanditiis, nisi officiis porro itaque. Facilis dolore velit accusamus quas voluptatem, quo, explicabo.</p>
			  </div>
			  <div class="three wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sunt quas tempore doloribus unde vero, tempora commodi, blanditiis, nisi officiis porro itaque. Facilis dolore velit accusamus quas voluptatem, quo, explicabo.</p>
			  </div>
			  <div class="three wide column">
			  	<img src="http://www.dumetdevelopment.com/images/client/20150421084209.png" class="ui medium circular image">
			  	<h1>lorem ipsum</h1>
			    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, sunt quas tempore doloribus unde vero, tempora commodi, blanditiis, nisi officiis porro itaque. Facilis dolore velit accusamus quas voluptatem, quo, explicabo.</p>
			  </div>
			</div>
		</div>
	</div>

</body>

Jika sudah save dan jalankan, cukup mudah bukan? Sekian tutorial tentang Cara Mudah Belajar Grid Sistem Pada Segment UI, sampai bertemu diartikel selanjutnya dan sampai jumpa.

jika berhasil maka hasilnya akan seperti ini :

#KeepLearn

#IsmetMA