Flexbox example with cross hair borders

by Naresh

HTML

<div class="wrapper">
		<div class="row">
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
		</div>
		<div class="row">
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
		</div>
		<div class="row">
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
			<div>Logo</div>
		</div>
	</div>

CSS

*{
    margin: 0;
    padding: 0;
 }
  img {
    max-width: 100%;
  }
  .wrapper {
    margin: 2em;
  }
  .row {
    display: flex;
  }
  .row > div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2em;
  }
  .row > div {
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
  }
  .row > div:last-child{
    border-right: none;
  }
  .row:last-child div{
			border-bottom: none;
  }