You can try this : Just split a col-9 in 2 parts. Bootply : http://www.bootply.com/128927 HTML : <div class=”col-xs-3″> col-xs-3 </div> <div class=”col-xs-9″> <div class=”row”> <div class=”col-xs-6″>col-xs-4.5</div> <div class=”col-xs-6″>col-xs-4.5 </div> </div> </div>
New solution (2022) CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid : The grid property to handle the grid layout (MDN reference) The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference) The object-fit property … Read more
Short Answer If the goal is to create a grid with equal height rows, where the tallest cell in the grid sets the height for all rows, here’s a quick and simple solution: Set the container to grid-auto-rows: 1fr How it works Grid Layout provides a unit for establishing flexible lengths in a grid container. … Read more
A GridView is a ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view. This is what you’d want to use (keep using). Because a GridView gets its data from a ListAdapter, the only data loaded in memory will be the one displayed on … Read more
By default, a grid item cannot be smaller than the size of its content. Grid items have an initial size of min-width: auto and min-height: auto. You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible. From the spec: 6.6. Automatic Minimum Size … Read more
Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } .grid::after { content: “”; flex: auto; }