Nested responsive grid with normal grid



I need an advise on how to achieve a layout like below and I need it responsive as well. It has 2 div’s - one is the Blue and the other is the White.

Currently, I’m testing with this code but I need another opinion (or code). Any suggestion is welcome. Thanks!

<div class="ui grid">
	<div class="sixteen wide column">
 		<div class="blue-bg">
     		<div class="ui grid container">
            	     <div class="sixteen wide column">
                	   <div class="white-bg">Lorem Ipsum</div>


I would try to avoid the grid layout if there was just one big column.
If you are looking for a basic responsiveness, then a container should be sufficient.
Why not try using a container nested in another container - and override the default padding of containers to have enough gaps between them?