Responsive grid with CSS Grids

Responsive grid with CSS Grids

by charmis

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

<div class="info">Resize this panel to see grids respond</div>
<div>
  square bracket [] - Indicates one way databinding. The property inside [] receives the data.

<counter [count]="initialCount"></counter>

The counter component is inside App component. initialCount is a property of App. By the above syntax we are setting the value of initialCount to the count property of counter component. 

@Input() decorator needs to be on the count property inside counter component. This is for passing data from parent to child.

@Output() decorartor: Inform parent when data changes inside child.

<counter [count]="myCount" (change)="countChange($event)"></counter>

() is event binding sytanx.

In the above code, change is a property inside counter component. countChange() is a method inside App component.



-------------
event
 -> wizard-step    	[Attendees]
      -> event-main
 -> wizard-step		[Payment]
      -> payment
 -> wizard-step		[Personal Info]
      -> personal-info
 -> wizard-step		[Confirmation]
      -> html


event-main component is the one that needs to change.
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 10px;
}

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}