grid-layout

Is it possible to shrink grid items just like flex items in css? Grid items .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .child { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding: 5px; border: 3px solid #a07; } <div class="container"> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> </div> jsfiddle Flex items .container { display: flex; margin-left: -10px; flex-flow: row wrap; }

I want to create a layout like first page of android market. I am trying to use gridlayout as I would like to put imageview with different sizes and location, I also need to input scrollview. Actually my problem is how to input scrollview inside android.support.v7.widget.GridLayout? I´ve tried: <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.astuetz.viewpager.extensions.example" android:id="@+id/scrollView1" android:layout_width="wrap_content" android:layout_height="wrap_content" >

I want to create a grid of responsive 4x4 squares with a margin of exactly 20px on the left and right sides of the overall container. Furthermore, this would effectively eliminate the left margin on the first squares in each row and also eliminate the right margin on the last squares in each row since double margins aren't needed. The green color notes the 20px margins on each side. I've so far created the grid of squares with percentages but the problem is that, since I am applying a margin to all sides of each square, this method does not guarantee a left and right margin (on the container)

I'm trying to create a 2x2 grid with divs. Some of the divs might contain an image, but it will probably be set as a background, with the option background-size: cover . Here's the pen I created: http://codepen.io/qarlo/pen/vLEprq .container { display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto; max-width: 960px; width: 80%; } .container__item { align-content: center; border: 1px solid #333; display: flex; flex-basis: 1; font-size: 3em; justify-content: center; height: 100%; margin-bottom: 1em; min-height: 300px; width: 47%; } <div class="container"> <div class=

i have a window in Qt, on that i am drawing a picture. now i want to place the progressbar over it. how can i do that?.. steps i am following to do Create a window, Draw picture in paint event of window Then create QGridLayout layout, add your window Display over it. suppose i want to add progress bar, over a portion of picture window. how can i do that i dont think its possible to implement in window paint event. please assist me Thanks You can add the progress bar as child of your QWidget without adding it in the layout. This will draw the QProgressBar into the QWidget. Since you are not

I want to create a grid of responsive images that are always squared in Bootstrap. So far I got this: Jsfiddle Link This part forces the elements to be squared all the time: .frontpage_square { position:relative; overflow:hidden; padding-bottom:100%; } .frontpage_square img { position:absolute; } The bigger square on the left and the nine smaller ones on the right are correct, but I can't figure out how I can spread the nine squares on the right over the full height. So basically they should take the whole height of the left, bigger square. Coding Enthusiast It is simple, you aren't arranging