CSS 2 then 1 grid for showing date

HTML-CSS
1

Hello people, I have been searching all over the web this morning, to find a css grid that I can reliably put together to show “what i think” is a visually appealing date style, for events on my upcoming section of my site. I have added these colors just so that you can see the effects of what I am after. I would like to build a html and css grid that looks like the following image. in column 1 two rows, and in column 2, 1 row.date_css_grid_example

Please could someone show me some example code that I can work with? I have been working with grids for this site, and am now trying to put together events.
This will be a date for the events, floated to the left on the archive pages. [http://www.airfieldcards.com/wordpress/airfield_card/halfpenny-green/](http://One airfield card already done with other grids)

2

Sorry guys, for asking such a question, but it seems, watching youtube video’s has proved a success and I have sussed it out. So, for anyone who finds this in the future, here is the code.

<head>
<link rel="stylesheet" type="text/css" href="gridDate.css">
</head>
<div class="wrapper">
<div class="box1">Box1</div>
<div class= "box2">Box2</div>
<div class= "box3">Box3</div>
</div>

.wrapper{
	display:grid;
	grid-column: 2;
	grid-row:2;
	width:180px;
	
}

.box1 {
	grid-column:1/2;
	grid-row:1/2;
	width:100px;
	background-color: gray;
}

.box2{
	grid-column:1/2;
	grid-row:2/3;
	width:100px;
	background-color: fuchsia;
}

.box3{
	grid-column:2/3;
	grid-row:1/3;
	width:80px;
	background-color: blue;
	color:white;
}
3

Check my sample here.
https://codepen.io/aris-tchoukoualeu/pen/gNyVMo?editors=1100
I used flexboxes

image
image944×868 35.5 KB

4

Thanks Tchoukoualeu that looks like a much more compact solution than my own.

and thanks for taking the time, even though I had already come up with a solution.

5

You are not defining a grid, grid-column and grid-row are used to place grid items. What you want is grid-template-columns / grid-template-rows. You really only need to place the third grid item.

It is three lines of CSS for the grid, the rest is just to center things and make it look more like the image.
https://codepen.io/anon/pen/orRgJG