Create 3 Coloum layout using CSS

HOPE THIS WILL HELP IN OPEN SOURCE
Garimakanwaria · Oct 3, 2020 · a08823e · a08823e
1 parent 84c48dc
commit a08823e
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/3 Coloum layout using CSS b/3 Coloum layout using CSS
@@ -0,0 +1,19 @@
+/* Create three equal columns that floats next to each other */
+.column {
+  float: left;
+  width: 33.33%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+  }
+}