You can use other layout techniques such as float and clear and change the value of the display property. Example $-$read through this article:

When using the container elements $($e$.$g$.,$ section, div, nav, aside, etc.$),$ use the id attribute to uniquely select them with CSS$.$ Make your layouts look like figure $1.$ Those are three different layout variations that are shown within three media query dimensions $($specified below$).$

Figure $1$

Follow the layout, but use your own content$-$

Do not use image placeholders or "lorem ipsum" text for this assignment, use your own content $($can be anything, sports scores, movie reviaw, favorite recipes, etc.$)$

Change captions, titles, logos$,$ color scheme, and categorias to match your content $-$ not this screen capture You must use the following semantic elements:

Footer, header section, aside, figure, figrogtipr

You must use at least one web font $-$ either with @font$-$face or with $($import

Your media queries will support the resolutions of:

$700$ pixels wide and under

$701$ to $1280$ pixels wide range

$1281$ to $1600$ pixels wide range

The layout changes for each of the resolutions shown. Make yours do the siame

Use the CSS grid for this and change the grid attributes within your media quarias

Use parcentages for widths so that the layout is also liquid $-$ you shouldn't need any fixed width values although you may need fixed height values for some items $($e$.$g$.,$ banner$)$

Any text that you see in the screen shots has to be text $-$ not a screen shot of text and imadien

You are creating one document that has three media queries in it $-$ not three separate dorumente

Your CSS is in an external file $($e$.$g$.,$ style.css$)$ shapes, CSS paths, or embedded SVG documents $($look in the CSS$-$basics example folder and view the file, 'shapes$\_$html$\text{'}$ for some examples of using shapes$)$