by @kodeazy

CSS How to divide div into 4 equal coulmns without using any CSS frameworks like BOOTSTRAP?

Home » CSS » CSS How to divide div into 4 equal coulmns without using any CSS frameworks like BOOTSTRAP?
  • using flex propery we can divide the div into desired number of parts.

  • Below is the CSS for dividing the row into desired number of parts.

    <style>
.row1{
	display: flex;
}
.coulmn{
	flex: 25%;
}
</style>

  • Below is sample code to divide row into desired number of coulmns.

    <html>
<head>
<style>
.row1{
	display: flex;
}
.coulmn{
	flex: 25%;
}
</style>	
</head>
<body>
	<div class="row1">
<div class="coulmn">first</div>
<div class="coulmn">Second</div>
<div class="coulmn">Third</div>
<div class="coulmn">fourth</div>
     </div>
</body>
</html>

    Output: Flex Example