css-grid-layout | CSS Grid Layout Examples | Grid library

I am trying to display photo's obtained from a flickr image search API, and the display the images in a grid, so that they all fill the screen.

I have tried many different CSS layouts, such as this:

https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

and this https://www.youtube.com/watch?v=wmeJMOxyD-w&list=LL&index=2&ab_channel=Programster

However, the images always appear in a single file column.

How could I edit the below code, so that the images are displayed in a grid?

I'm trying to adapt Flexible Holy Grail layout shown at https://css-tricks.com/snippets/css/css-grid-starter-layouts/ to have resizable header, footer and sidebars. One constraint I have is that that the sidebars must all start off at an absolute width given in pixels. The user can then resize them horizontally using the mouse. Similarly the header/footer must start at an absolute height, and also be resizable vertically.

I've tried to use the solutions given here, but they seem to rely to relative sizing, so I lose the ability to provide an exact starting width.

This CodePen shows what I've managed so far. Do I have to somehow convert the absolute initial sizing into relative sizing, or is there another way?

I have a CSS issue. Firefox renders the content the way I intend, however, chrome collapses the grid and does not display the image at the height it is supposed.

My intent: The image should be as large as possible without exceeding the width of the column. The row height should be taken from the resulting height of the image.

The recommendations discussed in this thread result in the issue below: Controlling the size of an image within a CSS Grid layout

relevant HTML:

The desired layout for wide screens:

The desired layout for narrow screens:

Initial CSS:

Visually, it looks somewhat like this:

I am new to CSS grid and I want to practice on it I want to make

,

but my second and third divs don't positioned correctly

I created a layout with grid-css that contains 12 columns in the center with a maximum-width and 2 columns which will only be shown on large screens. This technique is based on the following article. (In the example the max-width is set to a small number, to make it easier to examine)

The problem I want to solve is:
I want to use classes to determine how many columns wide an element should be. Like you can see in the example below, I have a class col-10 and col-6. Similar to the bootstrap framework.

Is there some way I can say that the element with a class "col" for example, should be always inside the main column and ignore the outer columns which are included in the full column?

At the moment the only solution I found was giving the first element in a row, the correct starting point. (In the example it is the class "main-start")

Example code:

I'm working on a layout that uses CSS-grid with breakout sections that use grid-template-columns: inherit;. Basically using the technique described in this article: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/

This works fine in major browsers, except for Edge 44, where grid-template-columns: inherit; seems to break the layout. If I simply copy the inherited value by hand, it displays fine.

Anyone know why this is happening, and if there is a way to fix it without manually duplicating the inherited values?

Here is a short code snippet showcasing the issue:

I have a wide html-table that I'd like to present for lower screen widths by styling it with pure css.

this is the unstyled table (the cells are overwide and full of content, this is just an abstract example)

this is the desired outcome

Each row should be a Block with the table cells stacked on top of each other in the same order as in the html source. Then this blocks should be layouted in a grid, so that there are as many blocks next to each other as the screenwidths allows.

Minimal Example