Flexbox 3 Equal Columns


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin:0;
padding : 0}
body {
max-width: 64rem; /*1024px width of parent containers*/
margin: 0 auto}  /* center containers */


div.full {
  display: flex; /*alert browser - this is flexbox */
  justify-content: center; /* center columns */
  flex-wrap: wrap;  /* wrap contents when necessary */
  gap : clamp(2rem , 5dvw , 4rem); /* adjusts spacing between 32px and 64px*/
}

.ez-column {
  flex: 1; /* make equal columns */
  border: solid 1px;
  text-align : center
}

p { 
  font-family: arial;
  font-size : 1.25rem; 
  margin : .25rem .5rem}

@media (max-width: 48rem) { /*768px*/
.ez-column {
flex: 100%
}

}
</style>
</head>
<body>
<div class="full">
<div class="ez-column">
<p>Content</p>
</div>
 <div class="ez-column">
<p>Content</p>
</div>
<div class="ez-column">
<p>Content</p>
</div>
</div>
</body>
</html>