Meteo 2

<style>
  div#ws-grid{
		display: grid;
  	grid-template-columns: 33% 33% auto;
  	grid-template-rows: 10% 20% 20% 10% 20% 20%;

  }

  div.ws-temperature-title{
  	background-color: blue;

  	grid-area: header;
  	grid-column-start: 1;
  	grid-column-end: 4;
  	grid-row-start: 1;
  	grid-row-end: 2;
  	-webkit-border-radius: 50px;
 	 	-moz-border-radius: 50px;
  }
  div.ws-temperature-current{
  	grid-column-start: 1;
  	grid-column-end: 2;
  	grid-row-start: 2;
  	grid-row-end: 2;
  }
    div.ws-temperature-min{
  	grid-column-start: 2;
  	grid-column-end: 3;
  	grid-row-start: 2;
  	grid-row-end: 2;
  }
    div.ws-temperature-max{
  	grid-column-start: 3;
  	grid-column-end: 4;
  	grid-row-start: 3;
  	grid-row-end: 2;
  }
  	div.ws-temperature-current-value{
  	grid-column-start: 1;
  	grid-column-end: 1;
  	grid-row-start: 3;
  	grid-row-end: 3;
  }
  	div.ws-temperature-min-value{
  	grid-column-start: 2;
  	grid-column-end: 2;
  	grid-row-start: 3;
  	grid-row-end: 3;
  }
  	div.ws-temperature-max-value{
  	grid-column-start: 3;
  	grid-column-end: 3;
  	grid-row-start: 3;
  	grid-row-end: 3;
  }
    div.ws-other-title{
  	grid-column-start: 1;
  	grid-column-end: 3;
  	grid-row-start: 4;
  	grid-row-end: 4;
  }


</style>


<div id="ws-grid">
  <div class="ws-temperature-title">NetAtmo</div>
  <div class="ws-temperature-current">Corrente</div>
  <div class="ws-temperature-min">Minima</div>
  <div class="ws-temperature-max">Massima</div>
  <div class="ws-temperature-current-value">{{itemValue(config.current_temperature)}}</div>
  <div class="ws-temperature-min-value">{{itemValue(config.min_temperature)}}</div>
  <div class="ws-temperature-max-value">{{itemValue(config.max_temperature)}}</div>
  <div class="ws-other-title">Altri dati</div>
</div>