Skip to content

Is it possible to have 2 images next to each other, using columns for example? #2113

Answered by nobkd
notflip asked this question in Q&A
Discussion options

You must be logged in to vote

Sure. You can create a block component that is styled as grid and use multiple images inside.
E.g.

<!-- some markdown file -->
::cols

![](imglink1)
![](imglink2)

::
<!-- components/content/Cols.ts -->
<template>
  <div>
    <ContentSlot :use="$slots.default" unwrap="p" />
  </div>
</template>

<style scoped>
div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
:deep(img) {
  max-width: 100%;
}
</style>

This would be fixed for two columns.

The :deep(img) is there to prevent images from overflowing, 'cause they seem to get the full site width in the default setting... Maybe you don't need this rule (with some style resets)... 🤷

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by notflip
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants